Berkenalan dengan SASS (Syntactically Awesome Style Sheets) CSS Preprosessor

Apa itu CSS Preprosessor?

CSS preprocessor adalah bahasa scripting yang memperluas CSS dengan memungkinkan developer untuk menulis kode dalam satu bahasa dan kemudian mengcompilenya ke dalam CSS.Saat ini ada beberapa CSS preprocessor yang paling sering digunakan, diantaranya Less.js dan SASS. Keduanya memiliki struktur kode yang sama, jadi jika Kita telah memahami salah satunya, Kita dapat memahami CSS preprocessor yang lainnya.
 

Apa itu Sass?

SASS merupakan singkatan dari Syntactically Awesome Style Sheets. SASS adalah sebuah bahasa preprocessor untuk CSS.Sass bukan pengganti dari css, namun sebuah alat untuk mempermudah dalam penulisan kode css. Dalam penulisan kodenya awalnya dalam format berekstensi scss dan kemudian akan di konversi ke dalam format css sebagai outputnya.SASS memberikan fitur yang tidak dimiliki CSS seperti variabel, nesting, mixins, inheritance, dan lain-lain.Fitur-fitur ini akan membuat kita menulis kode CSS yang lebih rapi dan bersih dan juga menghindari penulisan kode yang berulang.
 

Kelebihan SASS

1. CSS yang dihasilkan akan rapi dan mudah dipahami.
2. Otomatis akan berjalan dengan baik di semua browser.
3. Output CSS akan lebih terstruktur.
4. Lebih dapat dikatakan seperti bahasa pemrograman karena ada beberapa fitur, seperti variables, mixin, if, else, for while, loops.
5. Penulisan SASS dapat dengan 2 cara, yaitu .sass (tanpa kurung kurawal dan titik koma) atau.scss (menuliskan kode SASS mirip dengan CSS namun dengan penambahan fitur yang dimiliki oleh SASS)
6. Mungkin untuk menggunakan Sekumpulan sintaks dan fungsi yang berguna seperti warna manipulasi, matematika, dan nilai-nilai lain.
7. SASS sangat kompatibel dengan semua versi CSS, kita dapat menggunakan semua library CSS yang tersedia.

Beberapa fitur di SASS, antara lain:

1. Variables

Sama seperti bahasa pemrograman lainnya, Sass memungkinkan penggunaan variabel yang dapat menyimpan informasi yang dapat Kita gunakan di seluruh dokumen style. Misalnya, Kita bisa menyimpan nilai warna dalam sebuah variabel, dan kemudian menggunakan variabel ini saat akan mengatur warna suatu elemen. Ini memungkinkan Kita untuk dengan cepat mengubah warna tanpa harus memodifikasi setiap baris secara terpisah.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
 
body {
  font: 100% $font-stack;
  color: $primary-color;
}

2. Nesting

Anda dapat menulis CSS dengan sistem hierarki dengan fitur Nesting sehingga dapat Anda susun sesuai tingkatan. Hal ini sangat memudahkan Anda karena di CSS agak sulit untuk menulis seperti ini dan akan banyak redudansi.

nav {
 ul {
    margin: 5px;
    padding: 5px;
    list-style: none;
  }
  li {
      display: inline-block; 
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

3. Partials

Partials adalah bagian file Sass yang lebih kecil yang dapat diimpor ke file Sass lainnya. Pikirkan parsial sebagai potongan kode. Dengan potongan kode ini, CSS Kita sekarang dapat menjadi modular dan lebih mudah dipelihara.

4. Import

Anda dapat menggunakan perintah @import ‘nama_partials’; untuk memanggil file lainnya, terutama file partials.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. 

5. 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.

@mixin border-radius($radius) {
  border-radius: $radius;
  -o-border-radius: $radius;
  -ms-border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}
#main {
  @include border-radius(5px);
}

6. Inheritance

Dengan extend ini kita dapat membagikan/menggunakan suatu properti CSS dari sebuah selector ke selector yang lainnya tanpa harus menulisnya secara lengkap, dimana fungsinya hampir sama seperti inherintance dalam pemrograman dimana semua property yang ada pada parent bisa diturunkan ke childnya.

7. Operator

Operator ini sama seperti operator pada bahasa pemrograman dimana kita bisa melakukan operasi matematika seperti +,-, *, / , dan % pada SASS.

article[role="main"] {
  width: 600px / 960px * 100%;
}
aside[role="complementary"] {
  width: 300px / 960px * 100%;
}

Maka hasilnya akan diterjemahkan seperti berikut :

article[role="main"] {
  width: 62.5%;
}
aside[role="complementary"] {
  width: 31.25%;
}

Cara Install SASS

Disini kita akan menginstall SASS menggunakan NPM, jadi pastikan di komputer anda sudah terinstall Node.js dan NPM.
Ketikkan perintah berikut di terminal atau command line anda:

npm install -g sass

kalo sudah coba ketikan ini di command line atau terminanya, sass -v.
maka akan muncul versi sass kita.