SCSS dan SASS

21 Mar 2025

Apa Itu SCSS?

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.

Apa Itu SASS?

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.

Apa Perbedan SCSS dan SASS?

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.

Fitur-Fitur Utama SCSS dan SASS:

• Variabel: Menyimpan nilai (misal warna, ukuran) untuk digunakan kembali.
• Nesting: Menulis selector di dalam selector untuk struktur yang lebih rapi.
• Mixin: Blok kode reusable dengan atau tanpa parameter.
• Inheritance (@extend): Mewarisi style dari selector lain untuk mengurangi duplikasi.
• Operasi: Mendukung operasi matematika langsung (misal pembagian, penjumlahan).