Domieszki (Mixins)
autor: Robert
28 stycznia 2015
Domieszki jak sugeruje nazwa pozwalają „dołożyć” coś do naszych stylów. Są one swego rodzaju agregatorami często wykorzystywanych właściwości (coś jak klasy CSS z tym, że jedną domieszkę można umieścić wewnątrz drugiej domieszki).
Przykładowo, chcemy stworzyć sobie diva z zaokrąglonymi rogami. Jak wiemy, w tym przypadku, musimy stworzyć trzy właściwości CSS z odpowiednimi prefiksami:
|
1 2 3 |
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; |
Zamiast za każdym razem kopiować te trzy elementy, tworzymy sobie domieszkę, którą dołączymy do innych właściwości naszego elementu np:
|
1 2 3 4 5 |
.domieszka-border-radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } |
A następnie wykorzystamy ją podczas stylowania naszego diva:
|
1 2 3 4 5 6 7 8 9 10 11 |
.domieszka-border-radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } div { background-color: #ff00ff; border: 1px solid #000; .domieszka-border-radius; } |
Po kompilacji naszego pliku LESS do pliku CSS otrzymamy co następuje:
|
1 2 3 4 5 6 7 |
div { background-color: #ff00ff; border: 1px solid #000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } |
Jak widzicie, domieszka podczas kompilacji „domieszała” swoją zawartość do innych właściwości stylu dla naszego diva.
Oczywiście domieszki mogą pobierać parametry, zmienne oraz inne domieszki ale o tym w późniejszych rozdziałach.
