SASS & SCSS Part I : Mengenal dan Cara Installnya

Mengenal SASS dan SCSS

Hello coders, kali ini kita akan berkenalan dengan SASS dan SCSS.

Mungkin kalian sudah tidak asing lagi dengan yang namanya CSS. Yup CSS (Cascading stylesheet) ini biasa kita gunakan untuk menghias web kita agar terlihat bagus dan cantik. CSS sendiri menggunakan bahasa yang sederhana dan mudah dimengerti, jadi buat kalian yang baru di dunia programming pun dapat belajar CSS, namun bagi kalian yang sudah terbiasa dengan CSS, mungkin membutuhkan cara yang lebih efisien karna mungkin penulisan CSS yang masih kurang efektif atau terbilang sederhana. Maka untuk menjawab semua keluhan kalian, dibuatlah yang namanya CSS Prepocessor cara yang lebih efisien dari menulis CSS biasa. Salahsatu CSS Prepocessor yang biasa dipake adalah SASS.

SASS(Sassy Stylesheet) sendiri memberi kemudahan seperti tidak usah menulis kurung buka /tutup, dan juga tidak perlu menulis titik koma diakhir sintaks. Dengan menggunakan SASS sendiri memudahkan kita dalam menulis CSS seperti penggunaan variabel, nesting, mixins , selector inheritance dll. Keunggulan lainnya seperti CSS yang lebih tersutruktur, rapi, mudah dipahami, dan yang paling penting dapat berjalan baik di semua browser.

Kalian bisa melihat website SASS disini. Lalu ada SCSS, sama seperti SASS namun mungkin bagi kalian yang sedikit kurang faham dengan SASS bisa menggunakan SCSS, lalu apa yang membedakan SASS dengan SCSS ?

SCSS merupakan sintaks yang paling umum digunakan yang merupakan superset dari CSS, yang berarti setiap sintak css yang berada di CSS3 bisa digunakan pada SCSS, tetapi bisa menggunakan fitur seperti yang ada pada SASS dan memang penulisaanya lebih mudah difahami bagi kalian yang baru mengenal SASS dan SCSS ini. Biasanya file SCSS menggunakan format ".scss"

Sedangkan SASS sintaks yang lebih dulu muncul dari SCSS yang dikenal sebagai idented syntax yang biasa mengguanakn format .sass. Dan memang ditujukan untuk pengguna yang memilih kemudahan dalam menulis CSS.

Contoh dan perbedaan SASS dan SCSS:

Cara Instalasi

Ada dua cara menggunakan SASS dan SCSS yaitu dengan menggunakan aplikasi pihak ketiga seperti scout, compass, dll atau menggunakan command prompt / cmd.

Kali ini saya akan menggunakan pilihan yang kedua yaitu lewat cmd. Sebelum itu kita harus meng-install sass dulu.

Pertama, Bagi kalian pengguna windows Kalian perlu meng-install ruby dulu, bisa didownload installernya disini

Kedua, Bagi kalian pengguna windows buka command prompt dan bagi pengguna mac buka terminal.

Lalu, install dengan menuliskan " gem install sass" pada cmd / terminal kalian.

Jika sukses maka akan mucul seperti ini.

Untuk jaga-jaga, silahkan double check dengan menuliskan "sass -v" pada cmd /terminal kalian.

Jika sudah ,berarti selamat kepada kalian karna berhasil me-install sass pada laptop/pc anda.

Sekian pengenalan dan cara instalasinya. Untuk mempelajari SASS dan SCSS akan dibahas pada artikel selanjutnya.