Fitur Utama SASS Yang Harus Anda Tahu

Setelah artikel sebelumnya saya membahas bagaimana memulai SASS dengan Gulp. Kali ini saya akan jelaskan fitur utama SASS yang harus anda tahu, seperti variables, extend, nesting, mixin maupun import. Hal pertama yang harus anda tahu adalah bahwa SASS memiliki 2 macam syntax. Syntax yang pertama seperti syntax CSS, syntax ini memiliki ekstensi file .scss dan sering disebut dengan SCSS (Sassy CSS). Sedangkan syntax yang kedua menggunakan indentasi yang menggantikan bracket serta baris baru yang menggantikan semi colon, syntax ini memiliki ekstensi .sass dan sering disebut dengan Indented Syntax. Berikut contoh penulisan SASS untuk masing-masing syntax.

SASS dengan ekstensi .scss akan terlihat seperti ini.

Sedangkan SASS dengan ekstensi .sass akan terlihat seperti ini.

Bagaimana menurut kalian, cukup mudah bukan? Bagi sebagian orang Indented Syntax lebih mudah dibaca serta lebih cepat dalam penulisannya ketimbang syntax SCSS, namun saya sendiri lebih sering menggunakan syntax SCSS.

Ok, selanjutnya saya jelaskan dasar-dasar SASS yang sering dipakai.

Variables

Variable berguna ketika kita akan membuat CSS yang memiliki properti-properti dengan nilai yang sama. Salah satu kelebihannya adalah saat kita ingin mengubah nilai dari properti-properti yang sama, kita cukup mengubah nilai variable tersebut saja. Penamaan variable sendiri diawali dengan tanda $. Berikut contoh penggunaan variable dalam SASS.

Maka output CSS yang akan kita dapat adalah seperti berikut.

Kita juga dapat melakukan operasi matematika dengan variable yang kita buat baik penjumlahan (+), pengurangan (-), perkalian (*), pembagian (/) maupun modulasi (%). Berikut contoh operasi matematika dengan variable dalam SASS.

Maka output CSS yang akan kita dapat adalah seperti berikut.

Extend / Inheritance

Extend / Inheritance digunakan untuk mewariskan properti salah satu selector kepada selector lain. Berikut contoh penggunaan extend dalam SASS.

Maka output CSS yang akan kita dapat adalah seperti berikut.

Nesting

Nesting digunakan saat kita akan membuat CSS Combinators (div p, div > p, div + p dan div ~ p), CSS Pseudo-class (:hover, :active, :first-child dan lain-lain) ataupun CSS Pseudo-element (::first-line, ::first-letter, dan lain-lain). Berikut contoh pembuatan nesting dalam SASS.

Maka output CSS yang akan kita dapat adalah seperti berikut.

Mixins

Mixin memiliki fungsi seperti function pada bahasa pemrograman umumnya. Penggunaan mixin dimaksudkan untuk menghindari penulisan properti yang berulang. Mixin harus diawali dengan @mixin kemudian diikuti dengan nama mixin. Untuk memangil mixin, gunakan perintah @include. Berikut contoh pembuatan mixin dan pemanggilannya dalam SASS.

Maka output CSS yang akan kita dapat adalah seperti berikut.

Import

Import di dalam SASS memiliki fungsi yang sama seperti import pada CSS, yang mana kita dapat membagi style kita ke dalam beberapa file CSS kemudian kita import pada file CSS utama. Import pada CSS memiliki kelemahan, yaitu melakukan request http untuk tiap file CSS yang diimport. Sedangkan SASS tidak melakukan request http untuk tiap file SCSS, namun akan menggabungkannya kedalam satu file SCSS yang akan dicompile menjadi CSS. Berikut contoh penggunaan import dalam SASS.

File _variables.scss

File main.scss

Sebagai catatan, SASS bisa mengenali file tanpa ekstensinya, jadi untuk import kita bisa menuliskannya sebagai berikut @import "variables"; .

Maka output CSS yang akan kita dapat adalah seperti berikut.

Sekian artikel tentang fitur utama SASS yang harus diketahui bagi anda seorang Front End Developer. Tunggu artikel saya yang selanjutnya ya.

“SASS, Makes CSS Fun Again”