Pengenalan kepada Bahasa SASS

Dalam tutorial ini, kita akan mempelajari preprocessor SASS. SASS ialah alternatif kepada preprocessor LESS, yang juga membolehkan pengaturcaraan dalam CSS.

Sebenarnya, SASS mempunyai dua varian sintaks, varian pertama juga dipanggil SASS, dan yang kedua - SCSS. Kedua-duanya menyokong set ciri yang sama dan hanya berbeza sedikit dari segi sintaks. Walau bagaimanapun, memandangkan SCSS lebih baharu dan digunakan secara meluas, dalam tutorial ini kita akan mempelajarinya.

Jadi, sintaks SCSS adalah serupa dengan sintaks CSS, iaitu kita akan melihat kurungan kerinting yang sama dan petik koma yang sama seperti dalam CSS. Pertimbangkan contoh sintaks SCSS, di mana kita segera memberikan fon dan warna kepada pembolehubah, kemudian memberikan pembolehubah ini kepada sifat dalam pemilih body:

$font: Helvetica, sans-serif;
$color: #333;

body {
	font: $font;
	color: $color;
}