Pada tulisan sebelumnya, saya pernah membahas mengenai LESS, sebuah preprosesor CSS yang memberikan banyak fitur tambahan untuk mempermudah penulisan CSS. Selain LESS, juga terdapat preprosesor lainnya yang memiliki ide yang sama dengan LESS, tetapi memiliki implementasi yang berbeda. Salah satu contoh preprosesor lainnya ialah SASS, yang memiliki lebih banyak fitur dibandingkan LESS. Tulisan ini akan memberikan panduan cara instalasi SASS, atas permintaan dari saudara Henry Jahja.

Persiapan

Sebelum menggunakan SASS, kita perlu melakukan instalasi bahasa pemrograman Ruby terlebih dahulu. Ruby dibutuhkan karena SASS dibangun menggunakan Ruby. Silahkan download Ruby di sini, dan lakukan instalasi sebelum memulai.

Satu hal tambahan yang juga perlu diketahui, Ruby memiliki fitur manajemen paket yang dikenal dengan nama Gem. Fungsi dari Gem sama dengan Maven pada lingkungan Java, pip pada python, atau Composer pada PHP, dan mungkin fitur-fitur sejenis pada bahasa pemrograman lain. Jika anda belum pernah menggunakan fitur sejenis pada bahasa andalan anda, anda harus segera mempelajari fitur ini. Manajemen paket digunakan untuk mempermudah kita dalam instalasi dan pengunaan library maupun framework yang ada pada sebuah bahasa. Ide utamanya ialah kita dapat menggunakan library atau framework dengan mudah, tanpa banyak langkah tambahan selain instalasi melalui paket.

Anyway, sudah ngelantur. Kembali ke topik.

Selesai melakukan instalasi Ruby, pastikan anda dapat memanggil Ruby melalui command line. Jalankan cmd.exe dan masukkan perintah berikut:

C:\Users\bert>irb
irb(main):001:0>

Jika anda melihat Ruby telah berjalan seperti di atas, anda dapat langsung masuk ke langkah berikutnya. Jika tidak, ikuti langkah=langkah berikut dan coba lagi. Oh ya, untuk keluar, masukkan perintah exit:

C:\Users\bert>irb
irb(main):002:0> exit

C:\Users\bert>

Instalasi SASS

Setiap instalasi ruby secara otomatis akan diikuti dengan instalasi gem. Karenanya, untuk melakukan instalasi SASS, kita hanya perlu memerintahkan gem untuk melakukan instalasi, dengan perintah berikut:

gem install sass

Dan hasilnya adalah seperti berikut:

C:\Users\bert>gem install sass
Fetching: sass-3.2.6.gem (100%)
Successfully installed sass-3.2.6
1 gem installed
Installing ri documentation for sass-3.2.6...
Installing RDoc documentation for sass-3.2.6...

Selesai instalasi, coba jalankan perintah sass --help untuk memastikan SASS telah terinstalasi dengan benar (hasil kopi perintah dibawah dipotong untuk menghemat ruang).

C:\Users\bert>sass --help
Usage: sass [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.

Options:
    -s, --stdin                      Read input from standard input instead of an input file
        --trace                      Show a full traceback on error

Jika telah berhasil, mari kita langsung gunakan SASS!

Pengunaan SASS

Untuk mencoba menggunakan SASS, kita akan membuat sebuah file baru, dan melakukan kompilasi terhadap file tersebut. Ekstensi yang digunakan oleh SASS adalah .scss. Buat file baru dengan nama sass-sample.scss, dan isikan dengan kode berikut:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Simpan file, dan jalankan perintah berikut pada command line:

sass --watch sass-sample.scss:style.css

Dan kita akan mendapatkan hasil seperti berikut:

C:\Users\bert\Desktop\projects\sass-test>sass --watch sass-sample.scss:style.css

>>> Sass is watching for changes. Press Ctrl-C to stop.
  overwrite style.css

Setelah menjalankan perintah tersebut, anda dapat langsung melihat hasilnya dengan membuka file style.css yang secara otomatis dikeluarkan oleh SASS di direktori yang sama dengan sass-sample.scss.

Perbandingan SASS dan CSS yang Dihasilkan

Catatan:

  1. Contoh di atas diambil langsung dari contoh yang diberikan pada halaman utama website SASS.
  2. Pada contoh di atas kita dapat melihat bahwa hasil kompilasi SASS lebih singkat daripada SASS-nya sendiri. Tentunya hal ini terlihat merugikan, tetapi ingat bahwa SASS memiliki lebih banyak fitur dibandingkan CSS, sehingga keuntungan pengunaan SASS baru dapat dilihat pada pengunaan proyek skala menengah ke besar. Contoh di atas berfokus memperlihatkan fitur variabel pada SASS, bukan banyaknya kode yang diperlukan untuk membuat sesuatu.

Dari mana file style.css datang? Mari kita lihat perintah yang kita masukkan kembali. Pada perintah sebelumnya:

sass --watch sass-sample.scss:style.css

yang kita perintahkan ke SASS ialah:

  1. --watch pada dasarnya berkata kepada SASS: “Hei, tolong perhatikan direktori ini yah, kalau ada file dengan nama yang diberikan pada perintah berikut, compile dan simpan dengan nama setelah :”.
  2. Dan seperti yang dapat ditebak, perintah berikutnya, sass-sample.scss:style.css memberikan nama file yang dipantau dan nama file hasil kompilasi.

Ninja Edit: Sedikit tambahan informasi yang terlupakan: jika ada perubahan isi dari sass-sample.scss, sass secara otomatis akan melakukan kompilasi sehingga style.css juga berubah.

Jadi perintah sass di atas dapat dikatakan perintahnya adalah seperti berikut:

sass --watch [file-sass-sumber]:[file-css-hasil]

Bagaimana jika kita ingin menggunakan banyak file SASS (seoerti yang hampir pasti terjadi ketika mengembangkan web berukuran sedang - besar)? Kita dapat menggunakan fitur @import dari SASS. Pembahasan fitur lengkap SASS akan dilakukan lain waktu, karena penulis juga baru hanya berpengalaman menggunakan SASS untuk satu website.

Akhir kata, selamat bereksperimen dengan SASS, dan happy hacking!

comments powered by Disqus

Daftar Isi