Групиране на селектори По-малко
За да се намали количеството код след компилация, както и да се опрости работата със селекторите, в Less беше въведен специален псевдоклас :extend(). Този псевдоклас ви позволява да групирате селектори (обединение) чрез изброяване на няколко класа на едно място, при условие че всички тези селектори имат общи свойства. Просто казано, псевдо-класът :extend() автоматизира следния процес:
Списък със селектори е поредица от селектори, разделени със запетая. Повече от сигурен съм, че вече сте виждали такива списъци и дори сте ги използвали в проектите си.
Следният код демонстрира такъв списък:
Преди това такива събития се извършваха ръчно, а след това по искане на разработчика. Повярвайте ми, това е много ресурсоемка задача и най-лошото е, когато елемент от страницата промени дизайна си. В този случай трябва да използвате търсенето и да повтаряте определена последователност от действия всеки път, когато се срещне желания селектор. Такива дейности се извършват мързеливо, неохотно и без особен ентусиазъм. За щастие, разработчиците на препроцесора Less са намерили начин да се борят с това неразположение.
Добре, тогава какво предлагат препроцесорите? - пишете код и не обръщайте внимание на такива дреболии. Разбира се, това се казва с уговорката, че от време на време ще трябва да използвате псевдокласа на препроцесора :extend().
Нека да разгледаме няколко тривиални примера, за да започнете и да опитате за първи път :extend().
Пример 2.4.1
За да разберем как работи този псевдоклас, нека си представим, че имаме три селектора и те имат еднакви свойства.
В този случай .class-1 , .class-2 и .class-3 могат да бъдат напълно комбинирани. Ако такиваманипулирайки нашия пример, получаваме следния код:
Less предлага еквивалентно, но по-просто решение. Той ни казва, че трябва само да декларираме напълно селектора .class-1 и да групираме останалите с него. За да направите това, се препоръчва да използвате :extend().
Важно е да разберете, че можете да използвате :extend() точно като всеки друг псевдоклас. Това означава, че както директното изписване ( .class:extend() ), така и използването на родителския селектор ( .class < &:extend() >) са приемливи.
След като компилираме изхода, ще получим същия CSS, който получихме по време на ръчната оптимизация:
Пример 2.4.2
Можете да посочите или един селектор за разширението, или няколко.
Разширение на правилото
Селекторите могат не само да бъдат групирани, но и разширени. Всички тези големи думи всъщност танцуват около едно и също :extend(). По-рано бяха разгледани примери, в които всички свойства на селекторите са еднакви и това са идеалните случаи. На практика това е рядко, но се случва. Най-често има други случаи, когато някои от свойствата съвпадат, а други не. В този случай същият псевдоклас отново ще бъде полезен.
Пример 2.4.3
Студиото Artemka & CO разработва дизайн на целева страница за известна компания за бонбони.
По дизайн селекторът .global-navigation трябва да има бял фон и черен текст. Би било възможно просто да копираме липсващите свойства, но по искане на дизайнера на оформлението решихме да използваме :extend(), като по този начин получихме липсващите свойства.
По същество това е същото като групирането на селектори, но трябваше да говоря за това. Това се прави, за да не мислите, че можете да групирате само тяхселектори, които имат същите свойства.
Групиране със селекторна верига
Препроцесорите са толкова умни, че могат да следват верига от селектори със същото име. Това се прави с помощта на същия псевдо-клас :extend(), но с добавянето на някакъв параметър all.
Пример 2.4.4
Студио "Артемка" получи първите си редакции на оформлението за компания, която произвежда сладкиши. Клиентът иска долният колонтитул на сайта да има същите стилове като хедъра на сайта.
Дизайнерът на оформление помни способността да групира селектори .global-footer с всички селектори с име .global-header . Само едно нещо ми идва на ум:
След компилирането обаче не се получава желаният резултат. Селекторът .global-footer се групира само с първия селектор, а останалите се игнорират.
За да реши този проблем, трябва да използва опцията all, която казва на компилатора, че селекторът иска да групира всички съвпадащи селектори по име. Трябва да предадете този параметър по следния начин:
В резултат на това се получава желаният резултат. Студио "Артемка" продължава да работи по проекта, а клиентът продължава да изпраща желаните редакции.
Контекстно групиране
Less поддържа групиране с конкретен селектор. Говорим за факта, че :extend() може да приеме като цел не само името на селектора, но и селектор с необходимото влагане, контекст и някои други параметри.
Псевдокласът :extend() може да работи с:
- nth: :extend(:nth-child(n+3)) .
- атрибути: :extend([title=identifier]) .
- псевдо-класове: :extend(link:visited:hover) .
- псевдо-елементи: :extend(link:before) .
Пример 2.4.5
Дизайнерът на оформление получава оформление, вв който стиловете на дизайн на продуктите в каталога и статиите в блога имат общи стилове, но само в заглавката.
Той иска да наследи стиловете на .item .header, но не иска да се занимава с допълнителен код. Трябва да използваме контекстно групиране, като използваме познатия псевдоклас :extend().
След компилация се получава код, който напълно отговаря на очакванията на дизайнера и неговите изисквания:
Мисли и съвети
Може би това е най-обемната функционалност за обучение, предоставена от Less CSS препроцесора. В същото време това е най-малко използваната функционалност в реални проекти, тъй като трябва да запомните имената на селекторите за групиране, а при доста обемен проект това не е достъпен лукс.
Бих ви посъветвал да внимавате с :extend() и да го използвате само когато наистина има смисъл. Благодарение на рамката Bootstrap, позната на всички разработчици, започнах да използвам :extend() само за групиране на селектори със селектора .clearfix. Този подход елиминира появата на допълнителни класове в документа, като по този начин прави структурата по-чиста.