Gruparea selectorilor în mai puțin

Pur și simplu, pseudo-class: extend () automatizează următorul proces:

A apărut în v1.4.0

În regula de mai sus, selectorul: extinde va folosi "expanderul" (nav ul) la clasa .inline oriunde va apărea clasa .inline. Blocul de declarații va rămâne așa cum este, fără nici o referință la extensie (deoarece extensia nu este CSS).

Ca rezultat, obținem:

Observați cum selectorul nav: extins (.inline) este convertit la ieșire ca nav ul - extensia este îndepărtată înainte de ieșire și blocul selector rămâne neschimbat. Dacă nu sunt atașate proprietăți la acel bloc, acesta este eliminat din ieșire (dar extensia poate afecta în continuare alte selectori).

Sintaxă: extend ()

Pseudo-class: extend () este fie atașat la un selector, fie plasat într-un set de reguli. Arată ca o pseudo-clasă cu un parametru selector, opțional urmat de cuvântul cheie total:

Extensia selectorilor poate conține una sau mai multe clase, separate prin virgule. De exemplu:

Lărgirea selectorilor conectați la selector

Lărgirea selectorilor atașați selectorului arată ca o pseudo-clasă obișnuită, cu un parametru sub forma unui selector. Selectorul poate conține mai multe extensii, dar toate trebuie să fie la capătul selectorului.

Extindeți după selector: pre: hover: extend (div pre).
Există un spațiu între selector și extensie: pre: hover: extend (div pre).
Puteti pune o anumita prelungire: pre: hover: extend (div pre: extend (.bucket tr) - similar cu pre: hover: extend (div pre.
Dar acest lucru nu este posibil: pre: hover: extend (div pre) .nth-child (ciudat). Extindeți ar trebui să fie la sfârșit.

Dacă setul de reguli conține mai mulți selectori, oricare dintre ele poate avea un Extend. Selectori multiple care se extind într-un set de reguli:

Gruparea de context

Extensia selectorilor (Extend) poate fi plasată într-un set de reguli folosind sintaxa : extindere (selector). Plasarea pseudo-clasa: extend () în organism este un fel de comenzi rapide pentru plasarea lui în fiecare selector al acestui set de reguli.

Extindeți în setul de reguli:

La fel ca adăugarea după fiecare selector:

Gruparea selectorilor interni

Extend poate grupa selectorii interni. De exemplu:

Ca rezultat, obținem:

De fapt, extensia se uită la CSS compilat, nu la codul inițial mai mic. De exemplu:

Executarea exactă cu Extend

Extindeți selectorii (în mod implicit) caută potriviri exacte între selectori. Nu contează dacă selectorul folosește "steaua de conducere". Nu contează că două expresii N au același înțeles, ele trebuie să fie formate în mod egal pentru a coincide. Singura excepție este citatele din selectorul de atribute, deoarece Mai puțin crede că au aceeași valoare și coincid.

Vedeta stea nu contează. Selectorii * .class și .class sunt echivalenți, dar extinde nu le va compara:

Ca rezultat, obținem:

Ordinea pseudo-claselor contează. Selectori link: hover: vizitat și link: vizitat: hover corespunde aceluiași set de elemente, dar extinde le tratează ca fiind diferite:

Ca rezultat, obținem:

N-a expresie

Forma celei de-a N-a expresii nu contează. Expresele N-a 1n + 3 și n + 3 sunt echivalente, 3 sunt echivalente, însă nu se vor compara:

Ca rezultat, obținem:

Tipul de citare în selectorul de atribute nu este important. Toate intrările următoare sunt echivalente.

Ca rezultat, obținem:

"toate" în Extensia selectorului

Când specificați ultimul cuvânt cheie "all" în argumentul pseudo-class: extend (). - acest lucru spune mai puțin pentru a compara acest selector cu o parte a altui selector. Selectorul va fi copiat, iar partea potrivită a selectorului va fi înlocuită numai de o extensie, creând un nou selector. De exemplu:

Ca rezultat, vom avea astfel de stiluri CSS:

Puteți presupune că această variantă a operației efectuează, în esență, o căutare normală și înlocuire.

Interpolarea selectorilor cu extensii selector

Extinderea selectorilor NU poate compara selectorii cu variabile. Dacă selectorul conține o variabilă, extensia o va ignora. Pentru aceasta, există o cerere pentru o funcție de așteptare, dar acest lucru nu este un simplu înlocuitor. Cu toate acestea, extensia poate fi atașată la un selector interpolat.

Selectorul de variabile nu va fi comparat:

Și extensia cu variabila din selectorul țintă nu se potrivește cu nimic:

Ambele exemple anterioare sunt compilate în:

Cu toate acestea. extinde. conectat la selectorul interpolat va funcționa:

LESS precedent este compilat în următoarele CSS:

Acoperirea / extinderea selectorilor din interiorul @media

Lărgirea selectorilor scrise în declarația de presă ar trebui să coincidă numai cu selectorii din aceeași declarație media:

Selecțiile selectorilor de top coincid cu totul, inclusiv selectorii din interiorul suportului încorporat:

Identificați duplicatele

Până în prezent, nu au fost găsite duplicate. De exemplu:

Ca rezultat, obținem:

Cazuri de utilizare a extensiilor

clasic

Un caz clasic de utilizare este de a evita adăugarea unei clase de bază. De exemplu, dacă aveți

și doriți să aveți un animal subtip care va redefini culoarea de fundal, atunci aveți două opțiuni. Mai întâi, editați codul HTML

sau să creați un cod simplificat și să utilizați extensia mai mică, de exemplu

Reducerea dimensiunii CSS

Impuritățile copiază toate proprietățile în selector, ceea ce poate duce la duplicări inutile. Astfel, puteți utiliza extensii, nu impurități, pentru a deplasa selectorul la proprietățile pe care doriți să le utilizați, ceea ce va duce la un CSS mai mic. Exemplu cu impuritate:

Ca rezultat, obținem:

Exemplu (cu extensia selectorilor):

Ca rezultat, obținem:

Combinație de stiluri / O impuritate mai avansată

Un alt caz de utilizare este o alternativă la impurități. impuritățile pot fi utilizate numai cu selectori simpli, dacă aveți două blocuri HTML diferite, dar trebuie să le aplicați același stil, puteți utiliza extensii. De exemplu: