21 Mar 2025
SCSS adalah varian dari SASS yang menggunakan sintaks mirip dengan CSS standar. SCSS adalah singkatan dari Sassy CSS, dan pada dasarnya merupakan evolusi dari sintaks SASS asli. SCSS sepenuhnya kompatibel dengan CSS, sehingga file .css yang valid juga bisa dijalankan sebagai file .scss tanpa perubahan. SCSS menggunakan tanda kurung kurawal ({}) dan titik koma (;) seperti pada penulisan CSS biasa, membuatnya lebih mudah dipahami oleh developer yang sudah terbiasa dengan CSS.
SASS merupakan singkatan dari Syntactically Awesome Stylesheets. Ini adalah sebuah CSS preprocessor yang digunakan untuk menambahkan fitur-fitur pemrograman ke dalam CSS, seperti variabel, nesting (penulisan bersarang), mixin, inheritance, dan lainnya. Dengan SASS, penulisan kode CSS menjadi lebih terstruktur, efisien, dan mudah dipelihara. SASS sangat membantu dalam proyek-proyek besar yang memiliki banyak file CSS atau struktur desain yang kompleks.
Perbedaan utama antara SASS dan SCSS terletak pada sintaks penulisannya. SASS menggunakan gaya penulisan yang tanpa tanda kurung dan titik koma, dan hanya mengandalkan indentasi (mirip seperti Python). File SASS memiliki ekstensi .sass. Sebaliknya, SCSS menggunakan gaya penulisan seperti CSS dengan tanda kurung kurawal {} dan titik koma ;, serta memiliki ekstensi .scss. Secara fungsional, keduanya memiliki fitur yang sama, namun SCSS lebih populer karena sintaksnya yang lebih familiar bagi pengguna CSS.