Mari mengenal SASS (Syntactically Awesome Stylesheet)

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.

24 Februari 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat