Mengenal 7 Fitur CSS Preprocessor SASS

Bagi seorang developer pasti ingin ada variable untuk menyimpan warna misalnya atau nilai tertentu agar bisa dipergunakan kembali jika diperlukan. Atau mungkin ingin adanya kemampuan untuk membuat sebuah fungsi untuk menghemat waktu dalam penulis beberapa kode yang banyak dalam CSS.

Untuk menjawab semua keinginan developer, maka dibangun sebuah CSS Preprocessor yang menjadi solusi bagi developer yang mengidamkan fitur untuk mengoptimalkan CSS. Preprocessor merupakan program yang mengambil jenis data dan mengubahnya menjadi jenis data lain. CSS Preprocessor juga kami gunakan dalam mengerjakan layanan jasa pembuatan website di Whello Indonesia.

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