CSS Naik Level dengan Sass

Untuk Anda yang sering berkutat dengan Cascading Style Sheets alias CSS, pasti Anda pernah merasa menulis CSS adalah pekerjaan yang melelahkan. Mulai dari keharusan menulis ulang selektor-selektor yang bertingkat (nested); menulis prefix untuk kompatibilitas seperti -moz-*, -ms-* atau -webkit-*; dan bermacam-macam nilai kalkulasi yang bersifat konstan sehingga sulit dimanipulasi. Mungkin Anda bahkan pernah bertanya-tanya, mengapa CSS terkesan 'primitif' karena tidak mengenal fitur-fitur seperti nesting, fungsi, dan sebagainya.

Worry not, mari kita berkenalan dengan Sass, alias Syntactically Awesome Style Sheets. Sass adalah preprocessor untuk CSS, yang berarti kita menulis styling di Sass untuk kemudian di-build menjadi CSS. Sass memiliki banyak fitur yang memudahkan hidup kita penulisan CSS.

Instalasi

Sass awalnya ditulis dengan bahasa pemrograman Ruby dan tersedia sebagai gem sass. Namun, terdapat juga library yang ditulis di C/C++, yaitu libSass yang dapat digunakan dengan wrapper di berbagai bahasa pemrograman. Kali ini kita akan menggunakan wrapper Sass di Node.js untuk mencoba Sass.

Pastikan Anda sudah memiliki Node dan NPM terpasang pada sistem Anda. Kemudian kita akan lakukan instalasi Sass sebagai global package dengan NPM.

$ npm install -g sass

Setelah proses instalasi selesai, pastikan perintah sass terdaftar dengan benar.

$ which sass

Jika perintah tersebut tidak menghasilkan error, maka kita siap bermain dengan kode Sass. Mari kita buat file styles.scss untuk mencoba kompilasi Sass ke CSS.

$ touch styles.scss
$ vim styles.scss # gunakan text editor pilihan Anda

// styles.scss

#header {
  &-black {
    background-color: #000;
  }
}

$ sass styles.css

Kita akan melihat hasil kompilasi langsung di standard output terminal kita.

#header-black {
  background-color: #000;
}

Untuk memudahkan kita bermain dengan Sass, kita bisa menjalankan sass dalam watch mode dengan flag --watch. Mari buka sesi terminal baru dan jalankan perintah di bawah.

sass --watch styles.scss output.css

Sekarang Sass akan langsung mengompilasi setiap perubahan pada berkas styles.scss kita ke dalam berkas output.css.

Fitur-fitur Sass

Sass memiliki banyak fitur yang memudahkan kita menulis CSS. Berikut adalah beberapa fitur di antaranya.

Nesting

Seperti yang sudah kita lakukan pada contoh di atas, Sass memungkinkan kita untuk melakukan nesting kode CSS kita untuk membuat kode kita lebih singkat dan terkelompok.

// styles.scss
.panel {
  width: 480px;
  
  ul {
    list-style: none;
  }
  
  &--tight {
    width: 240px;
  }
}

/* output.css */

.panel {
  width: 480px;
}

.panel ul {
  list-style: none;
}

.panel--tight {
  width: 240px;
}

Perhatikan penggunaan operator & untuk penggabungan tag pada tingkat atas dari sebuah rule. Penggunaan nesting seperti ini memudahkan kita mengorganisasi kode CSS pada aplikasi kita.

Variabel

Sass juga memungkinkan kita mengorganisasi berbagai value dalam variabel-variabel.

// styles.scss

$font-stack: Helvetica, sans-serif;
$color-primary: #99EECC;

h1 {
  font-family: $font-stack;
  color: $color-primary;
}

/* output.css */

h1 {
  font-family: Helvetica, sans-serif;
  color: #99EECC;
}

Baik deklarasi maupun pemanggilan variabel dilakukan dengan simbol $.

Operator

Kadang kita kesulitan menentukan nilai-nilai yang relatif terhadap nilai lain dalam CSS, misalnya ukuran huruf kecil adalah 50% ukuran huruf besar, dan sebagainya. Sass mendukung penggunaan operator untuk kasus-kasus seperti itu.

//styles.scss

$font-size-base: 1rem;

h1 {
  font-size: 1.5 * $font-size-base;
}

h2 {
  font-size: $font-size-base;
}

small {
  font-size: $font-size-base / 2;
}

/* output.css */

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1rem;
}

small {
  font-size: 0.5rem;
}

Mixin

Untuk rules yang berulang atau dapat digunakan kembali, kita bisa menggunakan fitur mixin yang dideklarasikan dengan sintaks @mixin dan dipanggil dengan sintaks @includes. Misalnya, dalam contoh ini kita akan membuat mixin yang menambahkan ekstensi webkit dan mozilla pada transform.

// styles.scss

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.rotate-90 {
  @includes transform(rotate(90deg));
}

/* output.css */

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

Sintaks mixin termasuk dalam kelompok sintaks at-rules. Selain mixin, terdapat juga sintaks-sintaks at-rules lain seperti @use, @import, @warn, dan lain-lain. Kunjungi halaman dokumentasi Sass untuk daftar lengkapnya.

Looping dengan @each dan @for

Seperti contoh yang kita lihat pada bagian variabel di atas, variabel pada Sass dapat berisi kumpulan nilai-nilai, tidak hanya satu nilai. Dalam terminologi Sass, variabel yang berisi banyak nilai tersebut disebut List.

Kita dapat melakukan looping terhadap nilai-nilai di dalam sebuah list dengan menggunakan at-rule @each dengan sintaks seperti di bawah.

// styles.scss

$widths: 240, 480, 960;

@each $width in $widths {
  .container-#{$width} {
    width: #{$width}px;
  }
}

/* output.css */

.container-240 {
  width: 240px;
}

.container-480 {
  width: 480px;
}

.container-960 {
  width: 960px;
}

Selain @each, kita juga bisa menggunakan @for untuk looping dengan indeks.

// styles.scss

$base-spacing-unit: 6;

@for $i from 1 through 4 {
  .margin-top-#{$i} {
    margin-top: #{$i * $base-spacing-unit}px;
  }
}
```css
/* output.css */

.margin-top-1 {
  margin-top: 6px;
}

.margin-top-2 {
  margin-top: 12px;
}

.margin-top-3 {
  margin-top: 18px;
}

.margin-top-4 {
  margin-top: 24px;
}

Masih banyak fitur-fitur lain yang dimiliki Sass, yang memudahkan kita menulis dan mengorganisasikan kode CSS kita, bahkan memungkinkan kita untuk membuat framework CSS dengan mudah! Anda bisa kunjungi laman dokumentasi Sass untuk mendapatkan dokumentasi lengkap dari seluruh fitur yang dimiliki Sass.