SHARE ARTICLE :
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.
Daftar isi
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.
Damar Anggoro
WebdeveloperIngin konsultasi
dengan para specialist
Whello?
Apapun tujuan brand kamu, Whello siap membantu!
Tips lainnya dari kami
Bongkar Mitos Google Ads Sebelum Beriklan
Temukan kebenaran di balik mitos Google Ads sebelum kamu mulai beriklan. Dapatkan wawasan berharga untuk memaksimalkan hasil iklan kamu!
Query Deserves Freshness: Algoritma Google yang Prioritaskan Konten Baru
Temukan bagaimana Query Deserves Freshness (QDF) memengaruhi peringkat pencarian kamu! Dapatkan wawasan mendalam di sini.
Website Desa: Kenali Manfaat, Fungsi, dan Cara Membuatnya!
Kenali berbagai manfaat dan fungsi website desa. Ikuti panduan untuk membuatnya dan tingkatkan keterlibatan serta informasi di desa kamu!
Follow us on Instagram
Temukan tips bermanfaat digital marketing serta keseruan spesialis Whello dalam menumbuhkan brand, hanya di Instagram @whello.indonesia. Follow, ya!
