Memulai Belajar SASS Compass

Setelah sekian lama tertunda karena kebimbangan yang melanda, karena dihadapkan pada dua pilihan yaitu mau pakai LESS atau SASS, sebelumnya sempat nyari tahu nih jika LESS dilawankan dengan SASS bakal banyak yang lebih menyerankan mana, dan ternyata lebih banyak yang menyaran SASS dari pada LESS tentunya dengan kelebihan dan kekurangan masing masing, jadi sebenarnya saya ga perlu trial and error karena sudah dilakuin ma orang lain, jadi tinggal ngikut aja… hehehehehehe, dan apa lagi beberapa framework CSS dibangun menggunakan SASS seperti Foundation dan Gumby Framework. “Kalau begitu kenapa pakai bingung kalau ternyata lebih berat ke SASS?” karena… framework yang kita pakai adalah Bootstrap yang notabene sejak awal dibangun menggunakan LESS, tapi sepertinya emang jodoh nya ke SASS, kabar indah datang dari release bootstrap yang terkahir versi 3.1.0 yang ternyata sudah support Sass. Btw, tentu sudah pada tahu kan ya apa itu less dan apa itu sass, saya ga akan menjelaskan panjang lebar mengenai apa itu less dan apa itu sass, untuk sass dan compass bisa langsung aja menuju ke alamat website di bawah ini.

1. Sass Languange

2. Compass Framework

3. All about Sass dan Compass

4. Video tutorial by Web Design Tut+

Kenapa menggunakan CSS pre-processor ?

Sebenarnya mau mengunakan atau tidak menggunakan CSS pre-processor tergantung pada kebutuhan sih, jika CSS yang dibikin cuma dikit, tidak scalable dan tidak butuh maintenance di kemudian hari, ya CSS pre-processor sih ga begitu amat dibutuhin, namun jika kondisi nya sebaliknya maka CSS pre-processor ini akan sangat membantu. Begini, ini berdasarkan pengalaman pribadi sendiri, terlepas nanti dari pengalaman orang lain tentu akan berbeda juga.

Sederhana nya seperti berikut saya pernah bikin CSS untuk design banyak warna


.widget-box.bordered.color-blue header,
.widget-box.bordered.color-blue footer .btn {
background: #368ee0 !important;
}

.widget-box.bordered.color-orange header,
.widget-box.bordered.color-orange footer .btn {
background: #f8a31f !important;
}

.widget-box.bordered.color-red header,
.widget-box.bordered.color-red footer .btn {
background: #FF4433 !important;
}

.widget-box.bordered.color-green header,
.widget-box.bordered.color-green footer .btn {
background: #35aa47 !important;
}

.widget-box.bordered.color-blue header,
.widget-box.flat.color-blue section,
.widget-box.bordered.color-blue,
.widget-box.flat.color-blue {
border-color: #368ee0 !important;
}

.widget-box.bordered.color-orange header,
.widget-box.flat.color-orange section,
.widget-box.bordered.color-orange,
.widget-box.flat.color-orange {
border-color: #f8a31f !important;
}

.widget-box.bordered.color-red header,
.widget-box.flat.color-red section,
.widget-box.bordered.color-red,
.widget-box.flat.color-red {
border-color: #FF4433 !important;
}

.widget-box.bordered.color-green header,
.widget-box.flat.color-green section,
.widget-box.bordered.color-green,
.widget-box.flat.color-green {
border-color: #35aa47 !important;
}

.widget-box.bordered.color-blue header .action > a.btn:hover {
color: #368ee0 !important;
}

.widget-box.bordered.color-orange header .action > a.btn:hover {
color: #f8a31f !important;
}

.widget-box.bordered.color-red header .action > a.btn:hover {
color: #FF4433 !important;
}

.widget-box.bordered.color-green header .action > a.btn:hover {
color: #35aa47 !important;
}

Apa yang teman teman lihat dari code CSS di atas? yapp, ada pola pengulangan value warna untuk properties background, border-color dan color. Bisa dibayanging kan jika harus ganti value warna untuk class .color-blue, maka saya harus ganti juga untuk properti yang lain, ini semacam “mindon gaweni” dalam bahasa jawa, melakukan kerjaan yang berulang ¬†dan itu capeekk.

Tentunya akan lebih asyiiikk jika seperti ini bukan?


$color-blue: #368ee0 !important;
$color-orange: #FF4433 !important;
$color-red: #f8a31f !important;
$color-green: #35aa47 !important;

.widget-box.bordered.color-blue header,
.widget-box.bordered.color-blue footer .btn {
background: $color-blue;
}

.widget-box.bordered.color-orange header,
.widget-box.bordered.color-orange footer .btn {
background: $color-orange;
}

.widget-box.bordered.color-red header,
.widget-box.bordered.color-red footer .btn {
background: $color-red;
}

.widget-box.bordered.color-green header,
.widget-box.bordered.color-green footer .btn {
background: $color-green;
}

.widget-box.bordered.color-blue header,
.widget-box.flat.color-blue section,
.widget-box.bordered.color-blue,
.widget-box.flat.color-blue {
border-color: $color-blue;
}

.widget-box.bordered.color-orange header,
.widget-box.flat.color-orange section,
.widget-box.bordered.color-orange,
.widget-box.flat.color-orange {
border-color: $color-orange;
}

.widget-box.bordered.color-red header,
.widget-box.flat.color-red section,
.widget-box.bordered.color-red,
.widget-box.flat.color-red {
border-color: $color-red;
}

.widget-box.bordered.color-green header,
.widget-box.flat.color-green section,
.widget-box.bordered.color-green,
.widget-box.flat.color-green {
border-color: $color-green;
}

.widget-box.bordered.color-blue header .action > a.btn:hover {
color: $color-blue;
}

.widget-box.bordered.color-orange header .action > a.btn:hover {
color: $color-orange;
}

.widget-box.bordered.color-red header .action > a.btn:hover {
color: $color-red;
}

.widget-box.bordered.color-green header .action > a.btn:hover {
color: $color-green;
}

Klo dibahasa pemrograman lain seperti C, PHP, C# dll kita mengenal yang nama nya constanta atau varible, jadi cukup mengganti inisiasi dari constanta atau variable maka semua yang menggunakan constanta atau variable tersebut akan ikut berubah, itu lah yang tidak ada di CSS saat ini. Maka muncul lah penengah antara kita dengan CSS yaitu CSS pre-processor, konsepnya ya mirip dengan bahasa pemrogramaan lain, kita bisa bikin variable, function, looping. Dan tentunya bakal banyak kasus yang bisa terbantu dengan ada nya CSS pre-processor ini, yang saya tampilkan hanya beberapa masalah yang saya temui, mungkin dikemudian hari bakal ketemu ketemu kasus lain lagi.

So, cukup sekian dulu ya, selanjutnya saya akan posting hasil belajar saya mengenai sass compass ini, mungkin cara installasi nya dulu kali ya… :D

 

Comments

  1. Reply

  2. By rio

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>