Zagnieżdżanie
autor: Robert
28 stycznia 2015
Jak wiecie w CSSach możemy się stylować elementy potomne, przykładowo mamy diva który zawiera nagłówek, treść i obrazek. Jego struktura HTML wygląda następująco:
|
1 2 3 4 5 |
<div id="article"> <h1 class="article-header">Tytuł artykułu</h1> <p class="article-content">Lorem ipsum dorem</p> <img class="article-img" src="http://placehold.it/200x200"> </div> |
Aby ostylować jego kolejne elementy nasze reguły CSS muszą wyglądać następująco:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#article { background-color: #333; } #article .article-header { color: #00ff00; } #article .article-content { font-size: 18px; } #article .article-img { display: block; width: 100%; height: auto; } |
Za pomocą LESSa oraz jego zagnieżdżeń jesteśmy w stanie zrobić to bardziej zwięźle i czytelniej a wygląda to tak:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#article { background-color: #333; .article-header { color: #00ff00; } .article-content { font-size: 18px; } .article-img { display: block; width: 100%; height: auto; } } |
Jak widzicie LESSowy zapis pozwolił nam oszczędzić kilkukrotne przepisywanie #article a dzięki wcięciom w kodzie dokładnie widzimy czego dotyczą nasze zagnieżdżenia.
Gdy chcemy ostylować sobie pseudoselektory musimy do tego celu użyć znaku &. Poniżej przykład rozpisania klasy „clearfix” za pomocą LESSa.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } } |
O selektorach „rodziców” dowiemy się później.
