Mari mengenal SASS (Syntactically Awesome Stylesheet)

24/02/2015    Fachrul Ahaddin    2793    Website

Setelah kita mempelajari dan menguasai tentang CSS, untuk menambah pengetahuan kita tentang dunia css yang ternyata luas dan berkembang, kita akan berkenalan dengan prepocessor CSS. Untuk kesempatan kali ini kita akan membahas dan berkenalan sedikit dengan SASS yang merupakan salah satu dari preprocessor CSS.

Sekarang apa itu SASS? SASS merupakan pengembangan dari CSS3, dimana pada SASS sudah ditambahkan fitur variabel,mixin, aturan penyaringan dan lainnya seperti halnya bahasa pemrograman lainnya. Untuk menjadi CSS yang standard, SASS harus di compile melalui command line (cmd), atau plugin dari sebuah framework web.

Dalam penulisannya, SASS dapat ditulis dalam 2 versi penulisan sintaks. Yang pertama penulisannya dengan menggunakan sintaks yang sama dengan CSS3 yaitu dengan kurung kurawal sebagai pembungkus, titk koma, dan lain-lain. Setiap kode SASS yang di tulis dengan sintaks ini disimpan dengan format .scss . penulisan kedua yaitu dikenal dengan indented syntax yang menggunakan indentasi indentasi sbagai sebuah properti yang harus diaplikasikan ke dalam selector. Penulisan kedua ini disimpan dengan format .sass .

SASS menyediakan 4 fitur utama antara lain :

1.      Variabel

2.      Penyarangan (nesting)

3.      Pencampuran (mixing)

4.      Impor kode luar ( @impor )

Contoh Penggunaan SASS

penggunaan variabel :

Kemudian di compile dan akan menghasilkan sintaks CSS seperti ini :

Nesting dalam SASS :

Di compile akan menghasilkan sintaks seperti ini

Perhatikan sintaks css yang dihasilkan akan otomatis melakukan indentasi saat kita melakukan nesting / penyarangan. Hal ini tentu mempermudah kita membaca sintaks cssnya.

Demikian sedikit pengenalan apa itu SASS, jika ingin mempelajari lebih lanjut dapat mengunjungi situs resmi SASS di http://sass-lang.com/. Terima Kasih.

No data.