SASS DAN SCSS

21 Mar 2025

penjelasan tentang sass dan scss

Sass (Syntactically Awesome Stylesheets) Sass adalah bahasa stylesheet yang diperluas dari CSS dan menyediakan fitur-fitur tambahan seperti variabel, nested rules (aturan bersarang), mixin, inheritance, dan lainnya. Sass menggunakan indentasi untuk menentukan struktur, bukan tanda kurung {} atau titik koma ;, yang membuat kode lebih bersih dan mudah dibaca.

Fitur Utama Sass

1. Variabel
   Menyimpan nilai yang sering digunakan, seperti warna, font, ukuran, dan lainnya, agar mudah diubah dan digunakan kembali.
2. Nesting
   Menyusun selector CSS secara bersarang (nested) untuk mencerminkan struktur HTML, membuat kode lebih terstruktur dan mudah dibaca.
3. Mixin
   Menyimpan sekumpulan aturan CSS dalam satu tempat yang dapat dipanggil ulang di berbagai bagian kode, serta dapat menerima parameter.
4. Partials
   Membagi file CSS menjadi beberapa file kecil dan modular (dengan awalan _), yang kemudian bisa di-import ke file utama menggunakan @use atau @import.
5. Inheritance (Pewarisan)
   Menggunakan fitur @extend untuk menurunkan gaya dari selector lain, sehingga menghindari duplikasi kode dan membuat CSS lebih efisien.

SCSS adalah sintaksis yang lebih mirip dengan CSS tradisional dan merupakan bentuk yang lebih populer dari Sass. Meskipun SCSS adalah bagian dari Sass, SCSS memperkenalkan sintaks yang lebih mirip dengan CSS standar, dengan tanda kurung {} dan titik koma ;.

Kesimpulan Sass dan SCSS

keduanya merupakan preprocessor CSS yang sangat membantu dalam pengembangan web, karena menyediakan kemampuan seperti variabel, mixin, dan pengorganisasian kode yang lebih baik. SCSS lebih populer dan lebih sering digunakan karena kompatibilitasnya dengan sintaks CSS standar, sedangkan Sass menawarkan sintaks yang lebih minimalis dan lebih terstruktur tanpa kurung dan titik koma.