SASS (Syntactically Awesome Style Sheets) adalah preprocessor yang memperluas CSS dengan fitur variabel, nesting hierarki, dan mixins yang dapat digunakan kembali.
SASS Tutorial
Contoh Kode SASS Tutorial:
<!DOCTYPE html>
<html>
<head>
<style>
/* Hasil kompilasi SCSS ke CSS murni */
.kartu-sass {
background: #fdf2f8;
border: 1px solid #f472b6;
padding: 20px;
border-radius: 8px;
font-family: sans-serif;
}
.kartu-sass h3 { color: #db2777; margin-top: 0; }
.kartu-sass p { color: #475569; }
</style>
</head>
<body>
<div class="kartu-sass">
<h3>SCSS Preprocessor</h3>
<p>Menulis kode stylesheet lebih bersih, terstruktur, dan terorganisir.</p>
</div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS SASS Tutorial mengubah tampilan elemen di atas.