Rozszerzenia
autor: Robert
15 lutego 2015
Rozszerzenia w LESSie są podobne do domieszek. Dzięki nim można „rozszerzyć” klasę o właściwości innej klasy, nadpisać je itp.
Przykładowo mamy klasę CSS .btn-blue, która daje nam niebieski przycisk. Gdy chcemy zmienić kolor na czerwony, musimy stworzyć klasę .btn-red, zapisać w niej właściwości oraz edytować nasz kod HTML zmieniając w nim klasę na inną.
|
1 2 3 4 5 6 7 8 9 10 |
.btn-blue { background: blue; display: block; width: 120px; } .btn-red { background: red; display: block; width: 120px; } |
Kolejnym rozwiązaniem jest stworzenie uniwersalnej klasy .btn oraz drugiej klasy, która dodaje nam sam kolor tła. W tym przypadku musimy stworzyć 3 klasy by uzyskać efekt jak powyżej.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.btn { display: block; width: 120px; } .btn-blue { background: blue; } .btn-red { background: red; } |
A w naszym kodzie HTML musi się znaleźć zapis <a class="btn btn-red">.
Jak widzicie obydwie metody zmuszają nas do duplikowania treści w pliku CSS oraz zmian w pliku HTML.
Za pomocą :extend(...); unikamy tych problemów. Stworzymy sobie klasę tworzącą nasz „defaultowy” przycisk oraz 2 klasy korzystające z rozszerzenia i zmieniające jego kolor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.btn { background: white; display: block; width: 120px; } .btn-blue { &:extend(.btn); background: blue; } .btn-red { &:extend(.btn); background: red; } |
Co skompiluje się nam do postaci:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.btn, .btn-blue, .btn-red { background: white; display: block; width: 120px; } .btn-blue { background: blue; } .btn-red { background: red; } |
Jak widzicie, oszczędziliśmy miejsce w pliku CSS gdyż nasza standardowa klasa i zmiany kolorów wygenerowały się „po przecinku” a dodatkowe klasy z kolorami nie odziedziczyły wszystkich własności klasy .btn (jak miało by to miejsce w przypadku użycia domieszki) a jedynie sam kolor. Kolejną zaletą jest to, że w naszym pliku HTML nie musimy już tworzyć podwójnej klasy np. .btn .btn-blue tylko używamy samej klasy .btn-blue
