LESS tutorial logo

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:

Aby ostylować jego kolejne elementy nasze reguły CSS muszą wyglądać następująco:

Za pomocą LESSa oraz jego zagnieżdżeń jesteśmy w stanie zrobić to bardziej zwięźle i czytelniej a wygląda to tak:

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.

O selektorach „rodziców” dowiemy się później.


Maciej 5 stycznia 2017 o 10:05

Świetny kurs!

Odpowiedz