Setelah melihat dan mempelajari Framework CSS pada tulisan sebelumnya, sekarang kita akan terjun ke dunia preprocessor CSS, untuk melihat bagaimana permasalahan CSS diselesaikan dengan pendekatan berbeda: mengembangkan CSS menjadi bahasa yang menyenangkan. Seperti yang dapat dilihat dari judul tulisan, preprocessor yang akan kita gunakan adalah SASS.

Catatan: Tulisan ini merupakan bagian dua dari seri yang memiliki 2 bagian. Untuk membaca tulisan-tulisan lainnya dalam seri ini silahkan buka:

Bagian 1: Meningkatkan Kenyamanan Menulis CSS: Framework dan Preprocessor
Bagian 2: Bootstrap, Sebuah Framework CSS dari Twitter

Apa itu SASS?

Dikutip dari website resminya, SASS merupakan perluasan dari CSS3, yang menambahkan banyak fitur-fitur baru seperti variabel, mixin, aturan penyarangan, dan lainnya. SASS diterjemahkan menjadi CSS standar menggunakan perangkat lunak command line, atau plugin dari sebuah framework web.

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. Itís translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. SASS

Terdapat dua buah sintaks untuk penulisan SASS. Sintaks pertama untuk menuliskan SASS yaitu dengan menggunakan sintaks yang sama dengan CSS3 (kurung kurawal untuk membungkus properti, titik koma di akhir baris, dkk). Sintaks penulisan ini dikenal dengan nama SCSS, dan setiap kode SASS yang menggunakan sintaks ini disimpan ke dalam file berekstensi .scss.

Sintaks kedua dari SASS diberi nama indented syntax, yang mengandalkan indentasi sebagai penanda sebuah properti harus diaplikasikan pada selector di atasnya. Untuk menggunakan sintaks ini kita harus menggunakan file berekstensi .sass dalam menyimpan kode SASS.

Untuk tulisan ini sendiri kita akan menggunakan sintaks SCSS, karena kemiripannya dengan CSS. Hal ini dilakukan untuk memudahkan pembaca dalam mencerna kode SASS.

Menggunakan SASS

Untuk dapat menggunakan SASS, terdapat beberapa perangkat lunak yang harus sudah ada dalam sistem kita terlebih dahulu. Langkah-langkah instalasi berbagai perangkat lunak yang dibutuhkan, beserta dengan penjelasan kenapa perangkat lunak tersebut dibutuhkan dan bagaimana menjalankan SASS telah pernah dibahas pada tulisan sebelumnya. Untuk mencoba kode-kode yang ada di bagian selanjutnya, silahkan baca dan ikuti langkah-langkah pada tulisan sebelumnya terlebih dahulu.

Fitur-fitur SASS

SASS menyediakan sangat banyak fitur-fitur tambahan untuk memudahkan kita dalam menulis CSS. Untuk awal perkenalan fitur-fitur SASS, tulisan ini hanya akan memperkenalkan 4 fitur utama dari SASS, yaitu:

  1. variabel,
  2. penyarangan (nesting),
  3. pencampuran (mixin), dan
  4. impor kode luar (@import).

Jika ingin mempelajari keseluruhan fitur dari SASS, anda dapat langsung membaca dokumentasi resmi SASS, dan tentunya tidak tertutup kemungkinan akan ada lagi pembahasan mengenai SASS dari penulis ke depannya.

Untuk menghemat waktu, langsung saja kita lihat fitur-fitur utama dari SASS.

Variabel

SASS memberikan fitur variabel untuk memudahkan kita dalam menyimpan dan mengubah nilai-nilai properti dari aturan CSS. Seperti layaknya variabel pada bahasa pemrograman lain, kita dapat menggunakan variabel dalam lingkup global, maupun lingkup properti. Nilai yang dapat disimpan sebagai variabel sama dengan nilai-nilai yang dimungkinkan oleh properti CSS, yaitu: kode warna, nilai pengukuran (beserta satuannya), maupun string (untuk font-fammily).

Variabel dituliskan dengan menambahkan simbol $ di depan nama variabel yang diinginkan, yang kemudian diikuti dengan : dan nilai dari variabel tersebut, seperti pada properti CSS. Misalnya, untuk menambahkan sebuah variabel baru yang menyimpan warna dasar pada website, ktia dapat menuliskan kode seperti berikut:

$mainColor: #4433FF;

body {
    color: $mainColor;
}

a {
    color: $mainColor;
    font-weight: bold;
    text-decoration: none;
}

yang akan menghasilkan kode CSS seperti berikut:

body {
  color: #4433ff; }

a {
  color: #4433ff;
  font-weight: bold;
  text-decoration: none; }

Tidak cukup hanya untuk menyimpan nilai, SASS juga memberikan kita kebebasan untuk melakukan operasi perhitungan terhadap variabel yang kita buat. Misalkan, kita ingin membuat menu sederhana, kita dapat memastikan ukuran setiap menu sama dan memenuhi layar dengan melakukan pembagian ukuran keseluruhan menu dengan ukuran menu satu per satu, seperti berikut:

$pageWidth: 960px;
$menuCount: 6;

div#main-container {
    margin: 0 auto;
    width: $pageWidth;
}

ul#main-menu {
    width: $pageWidth;
}

ul#main-menu li {
    float: left;
    margin: 5px 10px;
    width: ($pageWidth / $menuCount) - 10px;
}

Yang akan menghasilkan CSS seperti berikut:

div#main-container {
  margin: 0 auto;
  width: 960px; }

ul#main-menu {
  width: 960px; }

ul#main-menu li {
  float: left;
  margin: 5px 10px;
  width: 150px; }

Adapun operasi matematis yang dapat dilakukan adalah operasi matematis standar (+, -, *, /, dan %), dan tentunya operasi matematis hanya dapat dilakukan terhadap nilai angka.

Seperti yang dapat dilihat dari contoh-contoh sebelumnya, dengan menggunakan variabel kita dapat meminimalkan pengulangan pada kode, sehingga ketika ingin mengubah warna dasar kita hanya perlu mengubah nilai pada satu tempat. Hal ini tentunya sangat memudahkan kita dalam bereksperimen dengan desain yang sedang dikembangkan.

Nesting (Penyarangan)

Dari kode SASS sebelumnya kita dapat melihat salah satu lagi kekurangan CSS, yaitu bagaimana kita harus menuliskan ul#main-menu sebanyak dua kali. Walaupun penulisan seperti itu logis dan mudah, tentunya kita tahu bahwa menulis seperti itu sangat melelahkan, terutama jika kita memiliki banyak tingkatan selector. SASS memberikan fitur untuk menyarangkan selector, dengan memasukkan selector turunan ke dalam selector asal:

ul#main-menu {
    width: $pageWidth;

    li {
        float: left;
        margin: 5px 10px;
        width: ($pageWidth / $menuCount) - 10px;
    }
}

yang akan menghasilkan kode CSS yang sama dengan sebelumnya:

ul#main-menu {
  width: 960px; }
  ul#main-menu li {
    float: left;
    margin: 5px 7px;
    width: 150px; }

Perhatikan juga bagaimana kode CSS yang dihasilkan oleh SASS secara otomatis memiliki tambahan indentasi ketika kita menggunakan penyarangan. Hal ini terutama berguna untuk membantu kita dalam membaca kode CSS yang dihasilkan, ketika kita ingin memastikan kode CSS yang dihasilkan tepat sesuai dengan keinginan.

Fitur tambahan dari penyarangan lainnya yaitu referensi ke “orang tua” dari selector yang ada di dalamnya. Misalnya, untuk pseudo selector yang seringkali tergabung dengan selector-nya, seperti berikut:

a {
    color: #44F;
    text-decoration: none;
}  

a:hover {
    text-decoration: underline;
}

Dengan menggunakan fitur parental reference dari SASS, kita dapat menambahkan :hover di dalam a seperti berikut:

a {
    color: #44F;
    text-decoration: none;

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

untuk menghasilkan CSS yang sama dengan kode sebelumnya. Referensi ke atas dengan menggunakan simbol & ini tentunya sangat membantu, karena kita menjadi dapat melihat seluruh pseudo selector yang diaplikasikan pada sebuah elemen tanpa harus berpindah tempat lagi. Perlu diingat juga bahwa simbol & harus diikuti dengan tanda :, karena fitur ini hanya dapat diaplikasikan pada pseudo selector. Tanpa adanya : setelah $, maka kita akan disajikan dengan pesan kesalahan.

Mixins (Pencampuran)

Terkadang dalam menuliskan kode CSS seringkali kita ingin menggunakan sekumpulan properti yang sama untuk beberapa elemen sekaligus. Dalam CSS, tidak terdapat cara lain selain menuliskan kode yang sama berulangkali, yang pada akhirnya akan meningkatkan beban perawatan (maintenance) kode kita. SASS menyelesaikan masalah ini dengan menambahkan fitur mixin, yang memungkinkan kita mendeklarasikan beberapa properti ataupun selector sebagai mixin dan mengaplikasikan nilai tersebut ke dalam selector lainnya.

Mixin dideklarasikan dengan menggunakan kode @mixin, dan dipanggil dengan @include di dalam sebuah selector. Misalnya, untuk membuat sebuah elemen menjadi blok dan rata tengah kita dapat membuat mixin seperti berikut:

@mixin block-and-center {
    display: block;
    margin: 0 auto;
}

.hor-navigation {
    @include block-and-center;
    width: 960px;
}

#footer {
    @include block-and-center;
    width: 1024px;
}

untuk menghasilkan CSS seperti berikut:

.hor-navigation {
  display: block;
  margin: 0 auto;
  width: 960px; }

#footer {
  display: block;
  margin: 0 auto;
  width: 1024px; }

Kita juga dapat memberikan parameter pada mixin, sehingga mixin yang dihasilkan menjadi seperti fungsi pada bahasa pemrograman pada umumnya:

@mixin block-and-center($width) {
    display: block;
    margin: 0 auto;
    width: $width;
}

.hor-navigation {
    @include block-and-center(960px);
}

#footer {
    @include block-and-center(1024px);
}

dan seperti layaknya fungsi pada bahasa pemrograman lain, kita juga dapat memberikan nilai standar pada parameter, sehingga kita tidak perlu mengisikan argumen jika ingin menggunakan nilai standar:

@mixin block-and-center($width:960px) {
    display: block;
    margin: 0 auto;
    width: $width;
}

.hor-navigation {
    @include block-and-center;
}

#footer {
    @include block-and-center(1024px);
}

Catatan: Sebagai klarifikasi, ketiga kode SASS terakhir yang dituliskan menghasilkan CSS yang sama dengan hasil kompilasi CSS pada contoh mixin pertama.

Impor Kode

Semakin membesarnya ukuran website yang kita kembangkan, semakin besar pula CSS yang harus kita buat. Ketika ukuran CSS yang kita buat sudah terlalu besar, hal logis yang pertama kali dilakukan oleh pengembang untuk mempermudah perawatan kode tentunya adalah dengan membagi-bagikan kode ke dalam beberapa file. Walaupun memang meningkatkan kemudahan perawatan, membagi-bagian CSS ke dalam banyak file dan kemudian memasukkan satu per satu file tersebut ke dalam HTML akan menyebabkan performa dari website menurun, karena browser harus melakukan banyak request HTTP ke server untuk mengambil file CSS.

Fitur @import dari SASS diciptakanuntuk menyelesaikan masalah ini. SASS memungkinkan kita melakukan impor kode dari file lain, untuk kemudian digabungkan ketika kompilasi, sehingga hasil akhir yang dimiliki tetaplah hanya satu file CSS.

Untuk membuat file yang dapat diimpor oleh kode lain, kita harus mengawali file tersebut dengan simbol _. File jenis ini dikenal dengan nama partial. Variabel maupun mixin dari file partial dapat digunakan pada file yang melakukan impor juga.

Misalkan jika kita memiliki dua buah file, _rounded.scss dan main.scss. _rounded.scss menyimpan mixin untuk membuat rounded corner, dan main.scss merupakan kode SASS utama. Isi dari kedua file tersebut adalah sebagai berikut:

/* _rounded.scss */
@mixin rounded-corner($radius: 15px) {
       -moz-border-radius: $radius;
         -o-border-radius: $radius;
    -webkit-border-radius: $radius;

            border-radius: $radius;
}

/* main.scss */
@import "rounded"

#header {
    @include rounded-corner(25px);
}

.button {
    @include rounded-corner(5px);
}

yang akan menghasilkan CSS (pada file main.css) seperti berikut:

#header {
  -moz-border-radius: 25px;
  -o-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px; }

.button {
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

Perhatikan juga bahwa kita tidak perlu lagi menuliskan ekstensi file dan simbol _ ketika memanggil @import pada file main.scss.

Akhir Kata

Kita telah melihat sekilas fitur-fitur utama dari SASS, beserta beberapa permasalahan pada CSS yang diselesaikan oleh fitur-fitur tersebut. Di bagian sebelumnya, kita juga telah melihat pendekatan yang digunakan oleh framework CSS untuk menyelesaikan permasalahan yang sama. Mana penyelesaian yang lebih baik? Tentunya jawaban dari pertanyaan tersebut bergantung kepada jenis website yang akan dikembangkan, dan anda hanya dapat mengetahuinya setelah memiliki pengalaman dalam mengembangkan website dengan preprocessor maupun framework.

Jadi, tunggu apa lagi? Segera cari kesempatan untuk menggunakan SASS, dan lihat sendiri kelebihan dan kekurangannya!

comments powered by Disqus

Daftar Isi