Mengenal 7 Fitur CSS Preprocessor SASS

Apa itu CSS Preprocessor dan SASS?

CSS Preprocessor merupakan bahasa script preprocessor yang dikompilasi dalam bentuk CSS. CSS Preprocessor memberikan kemampuan untuk membuat variabel, fungsi, dan penulisan CSS yang lebih terstruktur dan pastinya membuat proses Development lebih efisien dan fungsionalitas.

Saat ini ada beberapa CSS preprocessor yang paling sering digunakan, diantaranya Stylus, LESS, dan SASS. Berkenalan dengan SASS, SASS merupakan bahasa script preprocessor yang dikompilasi kedalam bentuk CSS. Keunggulan yang dimiliki SASS yakni terdapat variables, nesting, partials, import, mix-in, inheritance dan operator.

Bagaimana Instalasi SASS?

Untuk dapat menerjemahkan script sass ke css dibutuhkan sebuah compiler. Umumnya compiler yang digunakan adalah menggunakan bantuan Ruby. Install Ruby sesuai dengan sistem operasi yang digunakan.

Setelah itu buka command prompt kemudian install service compiler sass dengan perintah “gem install sass”.

Pastikan anda masih terkoneksi ke internet, karena perintah ini akan mendownload modul SASS dan menginstallnya. Jika proses instalasi selesai, anda akan melihat informasi bahwa proses download dan instalasi telah selesai

Cara kerja SASS adalah dengan memonitor suatu file/folder yang berisi file .scss (ekstensi untuk file SASS) dan melakukan compiling menjadi file CSS dari file-file tersebut ketika sebuah perubahan dilakukan.

Untuk memonitoring file tersebut maka masukkan perintah :
sass –watch target.scss:target.css

Jika sudah, Anda bisa mulai bekerja dengan file .scss dan meminimize command prompt nya. Karena kita tidak akan berurusan lagi dengan Command promptnya. Untuk pembuatan file .scss sendiri gunakan text editor kesayangan anda seperti Sublime Text atau Notepad++ dan melakukan save as dengan extensi .scss.

Belajar dengan Fitur SASS?

1. Variable SASS

Apabila kamu sudah pernah membuat kode program sebelumnya, pastinya akan memahami apa itu variable. Dengan SASS, kita bisa menambahkan variable pada kode CSS.

Seperti contohnya, kita ingin menyimpan nama font yang kita gunakan di satu variabel, atau kita ingin menyimpan warna tulisan di dalam satu variabel. Nantinya kita akan bisa panggil langsung didalem kode yang lainnya

Manfaat dari adanya variable ini yaitu kode kita akan lebih bersih dan meminimalisir redudansi kode. Dengan variable ini dapat menginisialisasi nilai terhadap suatu variable yang dapat digunakan untuk beberapa property yang dipilih.

Variable menggunakan $ sebagai indikatornya, seperti $font-stack atau $primary-color.

2. Nesting SASS

Kemudahan menggunakan sass kedua yakni nesting, nesting diartikan sebagai bersarang dimaksud sebagai child bersarang dengan parentnya dan sejajar dengan property parent.

Untuk fitur nesting ini, kita bisa menulis CSS dengan sistem hierarki, jadi bisa kita susun sesuai tingkatannya. Ini sangat memudahkan kita, karena di CSS agak sulit untuk menulis seperti ini, dan akan banyak redudansi.

3. Partial SASS

Kemudahan menggunakan sass ketiga yakni partial, partial merupakan file scss terpisah yang berisikan potongan2 script yang dimasukkan dengan import di file scss utama. file scss partial tidak dicompile ke file css sendiri, melainkan ikut dihasil compile file scss utama. file partial biasanya ditandai dengan underscore ( _ ), ex: _partial.scss

4. Import SASS

Kemudahan menggunakan sass keempat yakni Import, import pada sass terbilang lebih cerdas karena dapat mengenali file tanpa mencantumkan ekstensi dan dapat menemukan file scss partial tanpa harus menambahkan underscore ( _ ).

5. Mix-in SASS

Kemudahan menggunakan sass kelima yakni Mix-in, Mix-in dalam pengunaannya mirip seperti pemanggilan fungsi menggunakan parameter tertentu sehingga dapat tercapai efektifitas script.

6. Inheritance SASS

Kemudahan menggunakan sass keenam yakni inheritance, Inheritance merupakan pendeklarasikan beberapa property dan kemudian inheritance itu diextend kedalam sebuah selector.

7. Operator SASS

Kemudahan menggunakan sass terakhir yakni operator, penggunaan operasi matematika standar pada sass dipermudah tanpa menggunakan bantuan calc() lagi.