Yuk Kenalan dengan SCSS

"sass css, yuk kenalan SCSS, Preprocessor"

SASS (Syntactically Awesome Stylesheets) adalah preprocessor CSS yang dirancang untuk membuat stylesheet menjadi lebih dinamis, terstruktur, dan mudah dipelihara.

Dalam sebuah dunia developer, terdapat sebuah tools yang sangat penting untuk para pemula kana kegunaannya yang terbilang sangat sederhana dan juga mudah untuk digunakan. Apakah tools tersebut?  Sebut saja tools tersebut adalah SASS.

Apa itu SASS?

Syntactically Awesome Stylesheets atau SASS artinya preprocessor untuk CSS yang memungkinkan penulisan kode CSS lebih efisien dan terstruktur. Dengan SASS, pengembang dapat menggunakan fitur seperti variabel, nested rules (aturan bersarang), mixins, dan fungsi untuk menulis CSS yang lebih ringkas dan mudah dikelola. Kode SASS kemudian dikompilasi menjadi CSS biasa yang dapat dijalankan oleh browser.

SASS adalah bahasa yang digunakan untuk membuat CSS dan menawarkan fitur-fitur yang tidak tersedia dalam CSS. Salah satu fitur utamanya adalah kemudahan dalam penulisan kode yang lebih rapi dan bersih, serta mengurangi repetisi penulisan.

Fitur-Fitur pada SASS

Setelah memahami sekilas tentang apa itu SASS, pada poin kali ini kita akan membahas tentang apa saja fitur-fitur yang ada di SASS yang sudah disinggung sedikit sebelumnya.

1. Variabel

Fitur pertama SASS adalah variabel yang memiliki fungsi serupa dengan variabel dalam bahasa pemrograman lainnya, yang dapat digunakan berulang kali atau dipanggil oleh fungsi lain. Variabel di SASS ditandai dengan simbol $.

2. Nesting Selector

Fitur kedua SASS adalah nesting selector. Anda mungkin sering menulis selektor yang sama secara berulang dalam CSS, tetapi dengan SASS, Anda tidak perlu melakukan hal tersebut berkat adanya nesting selector.

3. Import

Fitur ketiga SASS adalah import. SASS memungkinkan Anda untuk memecah satu file CSS menjadi beberapa file SASS yang lebih kecil, tetapi tetap bisa dikompilasi menjadi file CSS. Ini sangat berguna untuk menjaga keterbacaan kode dalam satu file.

4. Mixin

Fitur selanjutnya adalah fitur yang memungkinkan Anda membuat fungsi yang dapat digunakan pada tempat yang lain.

5. Placeholder

Fitur selanjutnya adalah fitur placeholder yang dapat berguna untuk menulis dengan gaya yang lebih modern, menggantikan gaya pada CSS dasar.

6. Kondisional

Fitur lainnya yang ada di SASS adalah kondisional. SASS mendukung penggunaan struktur kondisional berdasarkan variabel yang ditetapkan.

7. Perulangan

Fitur yang terakhir ini memungkinkan Anda untuk melakukan perulangan menggunakan beberapa perintah seperti for, while, atau bisa juga menggunakan @each.