Saturday, 16 January 2016

Sass & Compass : Menggunakan Variable (hanya mendefinisikan nilai sekali)

Seperti yang telah saya sebutkan pada artikel sebelumnya, ada sejumlah pertumbuhan dari sebuah organisasi seperti BBC, eBay, dan LinkedIn yang merangkul Sass dan Compass dan menggunakan nya untuk menulis dan memelihara style sheetsnya . Itu pijakan untuk sebab bahwa ketika organisasi besar yang beralih dari menulis CSS langsung untuk menggunakan CSS preprocessor berarti ada suatu nilai ekonomis di sana.

Menggunakan  variable
Berapa banyak waktu ketika Anda bekerja pada sebuah website yang Anda kerjakan untuk mendeklarasikan nilai dari sebuah warna di dalam CSS? biasanya sebagai nilai hex (hexadecimal) seperti #bfbfbf. 10 menit? atau 20? . Saya sering (dalam kenyataan biasanya) berjuang untuk mengingat nilai hex, terutama dengan 2 sampai 3 warna pada sebuah situs. Dengan Sass, kita dapat hanya mendefinisikan warna sebagai variable. Sebuah variable adalah hanya mekanisme untuk mereferensikan sebuah nilai. Mari lihat pada contoh tiga variabel ini.

$red: #ff0b13;
$blue: #091fff;
$green: #11c909;


Mengerti syntax dari variable
Tanda dollar mengidikasikan ke Sass bahwa kita mendefinisikan awal dari sbuah variable. Kemudian diikuti nama dari variable (dengan tanpa spasi setelah tanda dollar). Kemudian sebuah colon (titik-dua) mengindikasikan akhir dari nama variable. berarti bahwa nilai akan datang setelah colon tapi sebelum semicolon (titik-koma) penutup. Dalam kasus ini, variable $green akan menjadi warna hijau yang kita inginkan seperti nilai hex. Dengan warna yang telah didefinisikan ke dalam variable tersebut, kita dapat menggunakannya dimanapun dalam Sass Style Sheet seperti ini :

.i-want-to-be-green {
color: $green;
}


Disini adalah CSS yang dihasilkan setelah melalui proses compile.

.i-want-to-be-green {
color: #11c909;
}


Dalam Sass, compile berarti mengubah Sass ke CSS.
Dalam membicarakan Sass, Anda akan melihat istilah 'compile' yang akan sering digunakan. Untuk tujuan kita, Anda perlu mengetahui bahwa compile berarti pergi dari Sass (salah satunya format .scss atau .sass) ke CSS. mudah bukan?.

Menulis dan mengingat nama variable jauh lebih mudah daripada mengingat nilai hex yang tidak biasa, bukan? lebih lanjut, ketika nilai warna tersebut dibutuhkan untuk diubah. Mereka hanya membutuhkan mengubah pada variable otomatis yang menggunakan variable tersebut akan berubah nilainya. tidak lebih 'find and replace' ketika warna dalam design diubah - Woo Hoo!

No comments:

Post a Comment