LESS tutorial logo

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ą.

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.

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.

Co skompiluje się nam do postaci:

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


Paweł 7 lipca 2015 o 15:29

Świetny tutorial ! Podziękowania i brawa dla autora ! Przydałby się na zakończenie jakiś praktyczny przykład (strona) zawierający zebraną wiedzę.

Odpowiedz