Saturday, 16 January 2016

Sass & Compass : Nesting rules

Sass memungkinkan rules untuk bersarang satu diantara lainnya. Jadi sebagai contoh, Jika Anda ingin membuat serangkaian link dengan sebuah elemen nav dan menyediakan alternatif keadaan untuk keadaan hover dan active. Anda dapat menulis kode berikut dalam Sass :

nav {
a {
color: $red;
&:hover {
color: $green;
}
&:visited {
color: $blue;
}
}
}


Kita meletakkan anchor link (tag a) di dalam elemen nav dan juga bersarang tag hover dan status visited dalam tag a.  Ini mungkin terlihat lebih rumit daripada yang sebenarnya. Disini bagaimana CSS hasil compile :

nav a {
color: #ff0b13;
}
nav a:hover {
color: #11c909;
}
nav a:visited {
color: #091fff;
}


Saya suka melakukan ini pada modul kecil yang berisi CSS untuk menjaga semua mengasosiasikan style bersama. terutama dimana pseudo classes (seperti  :hover dan :active) adalah dibutuhkan.

Tetap diingat bahwa itu jarang praktek yang bagus ketika menulis CSS selector untuk membuat nya terlalu spesifik. Sebagai contoh, disini adalah contoh dari bermacam dari CSS rule yang dapat membuat hidup susah :

#container .callout-area ul#callout-one li.calloutlist a.callout-link {
color: #bfbfbf;
}


Selector yang dihasilkan terlalu dalam , membuatnya sangat spesifik. dari  point pemeliharaan dari view nya akan terlihat jauh lebih serderhana ini untuk mencapai effect yang sama :

.callout-link {
color: #bfbfbf;
}


Jadi, tetap diingat bahwa hanya Anda dapat membuat rules bersarang tidak berarti Anda harus selalu menggunakannya.

No comments:

Post a Comment