Mengenal Fitur Dasar SASS CSS Pre-Processor

SASS merupakan pre-processor yang dikembangkan diatas Ruby sebagai Engine nya, yang berarti kita juga butuh Ruby untuk menjalankannya atau sekedar ingin belajar dan mencobanya. Syukurlah sekarang ini sudah dikembangkan library untuk porting ke berbagai bahasa termasuk NodeJS yang memang favorit bagi banyak Frontend Developer.

Saya pernah menulis di codepolitan mengenai instalasi minimal untuk SASS di NodeJS menggunakan Gulp sebagai compiler runner nya, Anda bisa baca disini, Saya juga pernah menulis Ebook membuat Framework CSS sendiri yang berisi juga langkah-langkah untuk setup SASS di NodeJS menggunakan Grunt, Anda bisa baca jika belum mengetahui kedua hal tersebut.

Berikut kita akan membahas beberapa fitur dasar yang ada di SASS, silahkan disimak!

Variabel

Pertama kita akan bahas mengenai penggunaan variabel dalam SASS, yang memiliki fungsi seperti variabel dalam bahasa pemrograman lain, bisa digunakan berulang kali atau dipanggil oleh fungsi-fungsi lain. Variable pada SASS ditandai dengan simbol $ sebagai prefiksnya, berikut contoh penggunaan variabel dalam SASS :

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

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting Selector

Seringkali di CSS kita harus menulis selector yang sama berulang kali. Dengan SASS kita tidak perlu melakukannya, contoh saja bila biasanya kita di CSS harus menuliskan:

nav {
  font-size: 12px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  color: blue;
  text-decoration: none;
}

Maka di SASS kita dipermudah dengan cukup mengetikkan :

nav 
{
  font-size: 12px;
  
  ul 
  {  
    margin: 0;
    padding: 0;
    list-style: none;
    
    li 
    {
      display: inline-block;
      
       a 
       {
          color: blue;
          text-decoration: none;
       }
      
    }
    
  }
  
}

Selain itu kita bisa juga menambahkan tanda & yang berarti kita ingin menyertakan parent-nya sebagai prefiks di output-nya nanti, seperti contoh berikut:

a{
  text-decoration: none;
  
  &:hover{
    text-decoration: underline;
  }
}

Import

Salah satu keunggulan SASS dibandingkan CSS biasa adalah bahwa SASS bisa memecah satu file CSS kedalam beberapa file SASS kecil yang bisa tetap di compile jadi satu file CSS, ini sangat berguna untuk tetap menjaga kode kita mudah dibaca dengan mengurangi line of code dalam satu file. Kita bisa menggunakan fitur @import dari SASS ini. Kita bisa memberi nama file SASS dengan diawali underscore (_) yang berarti file tersebut tidak akan di produksi menjadi file CSS melainkan hanya digunakan sebagai modul yang nantinya akan di import oleh file lain.

Mixin

Sebagai developer seringkali kita tidak ingin mengetik hal yang sama berulang kali, mixin merupakan salah satu fitur yang mengakomodir keinginan kita tersebut. Dengan mixin kita seperti membuat satu fungsi yang nantinya akan kita pakai di tempat lain. Berikut adalah contoh mixin yang bisa dilihat di potongan kode dibawah:

@mixin clearfix()
{
    *zoom: 1;
    &:before,
    &:after
    {
        display: table;
        content: ' ';
    }
    &:after
    {
        clear: both;
    }
}

Dan berikut adalah contoh penggunaan mixin tersebut:

.row()
{    
    @include clearfix(); 
    margin: 0 auto;
    max-width: 92.308em;
}

Extend

Seperti pada OOP extend juga digunakan untuk mewarisi apa yang dipunyai oleh parent yang di extend sehingga tidak perlu lagi mengetik hal yang sama. Berikut contoh penggunaan @extend ini :

.message {
  border: 1px solid #ccc;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

Operator

SASS bisa melakukan berbagai perhitungan matematis untuk membantu kita, seperti dalam contoh kode berikut dimana saya melakukan perhitungan width class column :

$columnCount: 12;
@for $i from 1 through $columnCount
{
    .column-#{$i}
    {
        float: left;
        width: percentage($i/$column-count);
    }
}

Kondisional

SASS bisa melakukan kondisional berdasarkan variabel yang di assign, contoh sederhananya seperti kode berikut :

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Perulangan

Untuk melakukan perulangan SASS bisa menggunakan for maupun while, berikut contoh kode looping menggunakan @for :

$columnCount: 12;
@for $i from 1 through $columnCount
{
    .column-#{$i}
    {
        float: left;
        width: ((100/$columnCount)*$i)*1%;
    }
}

Sedangkan contoh menggunakan @while bisa dilihat disini :

  .column-#{$i} { 
  	width: 2em * $i
  }

  $i: $i - 2;
}

Selain itu SASS bisa juga melakukan perulangan menggunakan @each, yang ini silahkan baca di official website-nya ya.

Demikian penjelasan singkat dari saya mengenai SASS sebagai CSS Pre-processor.

Artikel ini telah dipublikasikan juga di mazipanneh.com.

Ditulis oleh Irfan Maulana

Lee Campbell