Mengenal Dan Belajar SaSS

Sempat beberapa kali ingin menuliskan masalah pre-CSS  ini, tapi tidak punya banyak kesempatan, ada-ada saja yang menjadi halangan-nya, gantuk-lah, capek-lah, males-lah dan bla…bla…bla…., tapi akhirnya nulis juga :D, well kali ini saya mencoba share sedikit tentang apa itu Sass , berhubung ini tergolong bukan barang yang baru pasti sudah terdengar umum bagi yang sering bermain sebagai front-end Developer .SaSS apa itu ? gunanya buat ngapain ? apa kaitanya dengan Web Desing dan kenapa harus menggunaka SaSS, mungkin itu sedikit pertanyaan yang terlintas buat yang baru mengenal atau baru mulai belajar SaSS, sebelum memutuskan menggunakan yang mana, ada baiknya kita tela-ah dengan cara yang sederhana. karena selama ini kebanyakan dari kita hanya ikut-ikutan dengan model yang lagi trend tanpa mau mencari tau nyama-tidaknya menggunakan suatu tools.

well sebelum kita masuk kedalam, ada baiknya kita mulai dari tahapan paling awal, karena memang SaSS sangat berhubungan dengan sesuatu yang sudah sangat umum :), well cek it dot.

CSS dan CSS pre-Processor

CSS (Casscading Style) adalah sebuah bahasa sederhana yang memungkinkan kita untuk mengatur penampakan/tampilan/gaya dari sebuah halaman Web, simplenya CSS ini merupakan sebuah Kuas dan Cat jika kita mau membangun sebuah rumah. dalam dunia Web Developement penggunaan CSS saat ini terbilang WAJIB, karena 100% style yang ada dalam sebuah halaman web disusun dan diatur melalui CSS.

Bagi seorang Developer , khusunya yang menangani bagian design penggunaan CSS ini sering kali tidak efektif, maksud tidak efektif disini dimana kadang-kadang dalam masa pembuatan sebuah web style sering berubah-ubah karena menyesuaikan kebutuhan dan selera, misalnya saja font judul hanya harus besar dan berwarna hijau, kemudian 1 hari berikutnya font judulnya harus berubah ukuran dan warna lagi, jika hanya satu style saja tidak masalah, tetapi bagaiman jika yang berubah berjumlah ratusan ? tentu bisa saja keyboard yang melayang karena harus nyari dibagian mana, dibaris mana, difile yang mana dan bla…bla…., ini terjadi karena semua variable (warna, ukuran font, posisi, dll) tidak di-organisir dengan baik.

karena permasalahan itu lahirlah  CSS Pre-processor.jika diartikan dalam bahasa indonesia pre = sebelum dan processor = proses artinya CSS sebelum diproses, atau pemprosesan CSS sebelum bener-bener jadi CSS, dengan adanya preprocessor kita bisa meberikan variabel dan fungsi dalam sebuah file yang nantinya akan menjadi CSS yang akan kita gunakan.tentu saja denga model yang sudah tersusun dengan rapi.

saat ini ada beberapa CSS preprocessor yang banyak digunakan, misalnya seperti SaSS, LeSS. Stylus,PostCSS dan yang lain, tetapi dalam pembahasan ini kita mencoba untuk menelusuri SaSS , sekarang sudah lebih mengerti pastinya apa itu SaSS dan apa hubungannya dengan CSS.

SaSS

seperti yang kita bahas bersama sebelumnya, SaSS merupakan sebuah preprocessor CSS, SaSS sendiri saat tulisan ini dibuat sudah mencapai versi 3.4.22  dan masih dikembangkan sejak 9 tahun yang lalu sampai sekarang, file SaSS sendiri memiliki extensi .sass sebelum nantinya setelah diproses menjadi sebuah file CSS, untuk dapat menggunakan SaSS kita bisa memilih apakah menggunakan mode GUI atau CLI, pemilihan keduanya tergantung kebiasan masing-masing, keduanya harus terinstall, berikut beberapa aplikasi SaSS yang bisa kita gunakan

  1. CodeKit (Berbayar)
  2. Compass.app (Free dan Berbayar)
  3. Ghostlab (Berbayar)
  4. Hammer (Berbayar)
  5. Koala (Free Open Sources)
  6. LiveReload (Berbayar, Open Sources)
  7. PrePros (Berbayar)
  8. Scout (Berbayar)

jika teman-teman terbiasa dengan Command Line bisa langsung menuju ke Dokumentasi SaSS untuk tahapan Instalasinya.SASS dibangun dengan menggunakan bahasa pemrograman Ruby, maka dari itu kita membutuhkan Ruby agar kita dapat menjalankan SASS dalam komputer kita. anda bisa mendownload Installer Ruby untuk windows di link Download Ruby

Variable dalam SaSS

Pengguanaan Variabel dalam SaSS tidak berbeda dengan penggunaan variabel dalam bahasa pemrograman pada umumnya, termasuk cara penggunaan, prinsip kerja, dan tipe data, bagi yang sudah belajar basis pemrograman dasar pastinya sudah tidak asing dengan tipe data dan cara kerja dari penggunaan variabel, penggunaan variabel dalam SaSS biasanya lebih banyak digunakan untuk mendifinisikan warna, ukuran huruf, jenis font, dan tata letak seperti besar sebuah blok atau posisinya, untuk lebih jelas mari kita perhatikan barisan kode SaSS dibawah.

Bagaimana menurut kawan-kawan semua? terlihat jelaskan bagaiaman dan apa maksud dari kode diatas, terdapat beberapa variabel yang fungsinya sudah sangat jelas terlihat, misalnya seperti  $title-font  atau $cool-red  dan $box-shadow-bottom-only  variabel-variable ini nantinya digunakan untuk menjadi penentu nilai dari masing-masing penggunanya, jika ada yang berubah cukup hanya dengan merubah nilai dari variabelnya saja. dan hasil compile dari file diatas menjadi seperti berikut

Mixins

Ga perlu bingung dengan bahasanya yang ke-barat-baratan walapun emang bahasa inggris, anggap saja Mixins ini artinya sebuah fungsi atau class dalam bahasa pemrograman pada umumnya, dengan menggunakan Mixins kita bisa membuat sebuah varibel menjadi lebih dinamis dan menggunakan Mixins dibeberapa tempat tanpa harus menulis ulang kodenya, contoh misalnya seperti pada kode dibawah.

SaSSCSS

dari penggalan kode diatas sudah terlihat jelas bagaiaman dan untuk apa Mixins ini digunakan,  tanpa harus menuliskan kode berulang-ulang lagi bukan. jika dicompile maka hasilnya akan seperti berikut

Extend

satu lagi fitur dari SaSS yaitu extends , well extends disini juga sama halnya dengan extends yang biasa kita gunakan dalam pemrograman object sehari-hari, hanya saja cakupannya tidak seluas pada bahasa pemrograman pada umumnya, extends disini bisa kita umpakana seperti meng-inherintkan value yang ada dan menjadi bagian dari yang lainya, bingung ? mari kita lihat kodenya

SaSSCSS

perhatikan bagian @extends  yang ada dalam blok class .confirm  , fungsi @extends  disini untuk mengincludkan value atau isi yang ada dalam blok .dialog-button  kedalam .confirm   sama halnya yang ada pada blok .cancel

Nesting

hm… mungkin dalam artian sehari-hari kita bisa menyebutnya sebagaian bagian, maksudnya begini, dalam penulisan tag html ada beberapa tag menjadi bagian dari tag lain (didalam) , misalnya seperti didalam sebuah <p></p>  terdapat <ul></ul>  kemudian didalam <ul></ul>  terdapat <li></li>  dan didalam <li></li>  terdapat <a></a>  , dan dalam penulisan CSS-nya akan menjadi seperti berikut p ul li a  maksudnya yang akan diberikan style adalah tag <a>  yang ada dalam urutan tersebut, dalam  SaSS fitur itu disebut dengan Nesting, mari kita lihat dalam kode berikut

SaSSCSS

Aritmatika / Operations

SaSS juga memungkinkan kita untuk menggunakan proses matematika,mari kita lihat dalam barisakn kode dibawah

SaSSCSS

Functions / Fungsi

fungsi disini bukan berarti fungsi seperti pada mixins, fungstions disini adalah built-in functions atau fungsi-fungsi default bawaan SaSS yang bisa kita gunakan, ada banyak sekali fungsi yang bisa digunakan, misalnya saja sepeti darken()  dan yang lainya, untuk list fungsi-fungsi apa saja yang tersedia teman-teman bisa melihatnya di hugelist-nya SaSS, berikut cara menggunakan fungsi darken()

SaSSCSS

Keberadaan CSS Preprocessor sangat membantu dalam proses Development file CSS, penulisan Kode CSS lebih optimal dengan adanya variabel dan mixins, semua fungsi tersebut membuatnya menjadi lebih reusable dan tentunya akan menghemat waktu anda + tenaga yang dikeluarkan untuk mengetik baris-baris kode yang sama :)., dilain kesempatan kita akan mencoba bagaiaman implementasinya dalam development.

Published by

Khairu Aqsara

Khairu Aqsara a Web Developer almost every day and enjoys writing about his experiences . If you need help with your next project you know where to look.