Menggunakan Sass & Compass

CSS menjadi hal yang sangat penting dan utama bagi Web Designer untuk memperindah tampilan website mereka. Banyak sebagian Web Designer yang dihadapkan pada pengulangan-pengulangan kode di CSS dan susunan-susunan CSS yang terkadang berantakan dan tidak beraturan. Dengan adanya Sass, CSS yang kita buat menjadi lebih rapi, terstruktrur dan tentunya akan menghemat waktu pengembangan.

Berdasarkan penjelasan dari websitenya langsung:
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. — http://sass-lang.com.

Sass sendiri mempunyai dua format. Pertama .scss yang bahasanya mirip dengan CSS dan yang kedua .sass, lebih sederhana dan lebih singkat. Keduanya sama saja menghasilkan satu file CSS yang rapi. Tinggal kita memilih mana yang paling mudah digunakan saja.

Untuk diawal saya lebih menyarankan untuk menggunakan .scss karena formatnya sama dengan CSS yang sering kita gunakan.

Kenapa Harus Menggunakan Sass?

  1. Nested di CSS menjadi lebih rapi dan terstruktur
  2. Mempercepat waktu pengembangan dengan adanya variable, mixins, dan lainnya
  3. Minify CSS yang telah dibuat menjadi lebih mudah (dengan Compass)

Menginstall Ruby

Karena Sass dibuat menggunakan Ruby, maka kita harus menginstall Ruby dulu di komputer kita. Untuk memasangnya cukup gampang, kamu tinggal menuju http://rubyinstaller.org/downloads/ dan memilih install-an yang sesuai.

Menginstall Sass

Buka Terminal atau Command Prompt dan ketik:

gem install sass

Apabila sukses maka akan muncul tampilan sebagai berikut:

Fetching: sass-3.2.7.gem (100%)
Successfully installed sass-3.2.7
1 gem installed
Installing ri documentation for sass-3.2.7...
Installing RDoc documentation for sass-3.2.7...

Oke, sampai disini Sass udah berhasil kita install. Pastikan kamu harus terkoneksi dengan internet karena jika tidak maka instalasi tidak akan berhasil.

Menginstall Compass

Tetap di Terminal atau Command Prompt yang sama, ketik:

gem install compass

Dan setelah berhasil akan muncul tampilan berikut:

Successfully installed compass-0.12.2 
1 gem installed 
Installing ri documentation for compass-0.12.2... 
Installing RDoc documentation for compass-0.12.2...

Mari Memulai!

Sebenarnya kita sudah bisa memulai menggunakan Sass setelah menginstall Sass tanpa Compass dengan membuat file .scss/.sass sendiri dan mengcompile sendiri dengan perintah sass –-watch lokasi_file:target_tujuan. Namun dengan Compass semuanya bisa jauh lebih mudah karena Compass sendiri sudah dilengkapi dengan konfigurasi yang mudah dan koleksi mixins CSS3 yang lengkap.

Untuk memulai project pertama, pastikan kamu memilih direktori dimana kamu biasa meletakkan project-project kamu. Tetap di Command Prompt, ketik:

compass create project_saya

Dan di direktori tersebut akan terdapat susunan file seperti berikut:

ubig-sass-compass-directory

Direktori sass/ berisikan dari file .sass/.scss yang nantinya akan kita buat. Disini kita akan membuat ataupun mengedit file .sass/.scss yang kita buat. Kamu bisa menghapus file bawaan di direktori ini dan membuat file baru dengan ekstensi .sass/.scss sesuai dengan keperluan projectmu sendiri.

Direktori stylesheets/ berisikan CSS hasil dari .sass/.scss yang sudah kita buat di direktori sass/ sebelumnya.

Dan file config.rb yang berisikan konfigurasi Compass untuk project terkait.

Kamu bisa memulai dengan membuat file baru bernama style.scss di folder sass/. Untuk awal-awal kita menggunakan format .scss karena ini merupakan format yang paling mudah dan mendekati dengan CSS yang sering kita pakai seperti yang saya sebelumnya katakan diatas.

Isi dari style.scss

.menu {
	background: #ffffff;
	a {
		color: #9cbf11;
	}
}

Setelah itu kita perlu kembali ke Command Prompt untuk mengcompile file style.scss tersebut. Pastikan kamu ada di direktori project_saya yang sudah kita buat sebelumnya. Ketik:

compass watch

Jadi nantinya biarkan saja Command Prompt ini tetap terbuka, karna nanti apabila ada perubahan di file Sass yang kita buat, maka secara otomatis akan mengcompile file tersebut.

Maka hasilnya akan menjadi:

.menu {
  background: #ffffff;
}
.menu a {
  color: #9cbf11;
}

Mudah bukan? Jika sebelumnya kita banyak melakukan pengulangan untuk beberapa selector, maka dengan ini kita hanya perlu membuat nesting yang sangat mudah dipahami dan jauh lebih rapi.

Variables dan Mixins

Dan gampangnya lagi, kita bisa membuat sebuah variable di Sass.

$bgColor: #ffffff;
$linkColor: #e74c3c;

.menu {
	background: $bgColor;
	a {
		color: $linkColor;
	}
}

Dan hasilnya akan menjadi
.menu {
  background: #ffffff;
}
.menu a {
  color: #9cbf11;
}

Kita juga bisa menggunakan fungsi bawaan dari Sass yang memudahkan kita untuk mengubah-ngubah warna dengan menjadikannya lebih terang atau lebih gelap.

$bgColor: #ffffff;
$linkColor: #e74c3c;

.menu {
	background: $bgColor;
	a {
		color: $linkColor;
		&:hover {
			color: darken($linkColor, 10%);	
		}
		&:focus {
			color: lighten($linkColor, 10%);
		}
	}
}

Dan hasilnya akan menjadi:

.menu {
  background: white;
}
.menu a {
  color: #e74c3c;
}
.menu a:hover {
  color: #d62c1a;
}
.menu a:focus {
  color: #ed7669;
}

Ada banyak fungsi terkait color dan lainnya, kamu bisa lihat dokumentasi lengkap-nya disini http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

Tidak sebatas pada variable saja, Kita juga bisa membuat mixin (atau lebih mirip dengan fungsi jika kita pernah belajar pemrograman). Jadi, mixin ini nantinya akan jauh mempermudah kita menulis CSS tanpa melakukan banyak pengulangan.

Misalkan:

$bgColor: #ffffff;
$linkColor: #e74c3c;

@mixin menu {
	background: $bgColor;
	a {
		color: $linkColor;
		&:hover {
			color: darken($linkColor, 10%);	
		}
		&:focus {
			color: lighten($linkColor, 10%);
		}
	}
}
@mixin right($leftMargin) {
	float: right;
	margin-right: 0;
	margin-left: $leftMargin;
}

.menu {
	@include menu;
	@include right(10px);
}

Dan nantinya hasilnya akan menjadi seperti ini:

.menu {
  background: white;
  float: right;
  margin-right: 0;
  margin-left: 10px;
}
.menu a {
  color: #e74c3c;
}
.menu a:hover {
  color: #d62c1a;
}
.menu a:focus {
  color: #ed7669;
}

Kita juga bisa menggunakan mixin ini berulang kali dengan menggunakan @include didalam selector css yang kita buat.

Untuk mempelajari Sass lebih lanjut kamu bisa membuka website resminya http://sass-lang.com. Dan karena kita menggunakan Compass, kamu juga bisa mengecek lebih lanjut ke website resminya http://compass-style.org.

Tips

  • Ubah css_dir di file config.rb pada direktori projectmu sesuai dengan lokasi stylesheet direktori web yang sedang kamu kerjakan untuk langsung digunakan.
  • Pasti agak mengganggu dibeberapa line dari CSS yang kita buat ada sebagian comment langsung dari Compass-nya sendiri. Untuk menghilangkannya, kamu bisa menambahkan line_comments = false; di config.rb
  • Untuk me-minify hasil akhir dari CSS yang kamu buat menggunakan Sass, bisa dengan menambahkan output_style = :compressed; di file config.rb

Kamu masih bisa berkreasi dengan menciptakan library mixins sendiri, atau dengan mengatur variables yang memang dapat diatur sesuka hati. Intinya, jangan sampai melakukan banyak pengulangan pengetikan untuk beberapa rules CSS yang sama. Dan dengan bantuan Sass ini, pastinya hal itu bisa diminimalisir.

Sumber : TrikWeb