A szelektorok csoportosítása kevesebb

Egyszerűen fogalmazva, az ál-osztály: extend () automatizálja a következő folyamatot:

Megjelent a v1.4.0-ban

A fenti szabályban a selector: extend a "plugin" (nav ul) parancsot használja a .inline osztályra, ahol a .inline osztály megjelenik. A deklarációblokk ugyanúgy marad, anélkül, hogy hivatkozás lenne a kiterjesztésre (mivel a kiterjesztés nem CSS).

Ennek eredményeképpen:

Figyeljük meg, hogy a nav ul: extension (.inline) választó hogyan változik a kimeneten nav ul - a kiterjesztés el van távolítva a kimenet előtt, és a választóblokk változatlan marad. Ha nincsenek tulajdonságok a blokkhoz, akkor az eltávolításra kerül a kimeneten (de a kiterjesztés még mindig hatással lehet más szelektorokra).

Szintaxis: extend ()

Az ál-osztály: extend () vagy egy szelektorhoz kapcsolódik, vagy egy sor szabályba kerül. Olyan pszeudoosztálynak tűnik, melynek választó paramétere van, amelyet adott esetben a kulcsszó követ:

A szelektorkészletek kiterjesztése egy vagy több osztályt tartalmazhat, vesszővel elválasztva. Például:

A választóhoz csatlakoztatott szelektorok kiszélesítése

A szelektorhoz csatlakoztatott szelektorok kiszélesedése úgy néz ki, mint egy közönséges pszeudosztály, egy paraméterrel választóként. A választó több kiterjesztést tartalmazhat, de mindegyiknek a választó végén kell lennie.

Hosszabbítás a választó után: pre: lebegés: kiterjesztés (div pre).
Van egy hely a választó és a kiterjesztés között: pre: hover: extend (div pre).
Tudsz kiterjeszteni: pre: lebeg: kiterjeszt (div pre: kiterjeszt (.bucket tr) - ugyanaz, mint az elő: lebeg: kiterjeszt (div pre. Vödör tr)
De ez nem lehetséges: pre: hover: extend (div pre) .nth-child (páratlan). A kiterjesztésnek a végén kell lennie.

Ha a szabálykészlet több szelektort tartalmaz, bármelyikük kiterjesztéssel is rendelkezhet. Többszörös szelektorok, amelyek kiterjednek egy szabályrendszerre:

Kontextus csoportosítása

A szelektorkészletek (kiterjesztés) kiterjesztése a szintaxist használó szabálycsoporton belül helyezhető el : kiterjesztése (választó). A pseudo-osztályú elhelyezés: extend () a testben egyfajta gyorsbillentyű, amely ezt a szabálykészlet minden egyes választóját elhelyezi.

Kiterjesztés a szabályok szerint:

Ugyanaz, mint az egyes választók után:

Belső szelektorok csoportosítása

A kiterjesztés csoportosítja a belső szelektort. Például:

Ennek eredményeképpen:

Valójában a kiterjesztés a kompilált CSS-t, nem pedig az eredeti Less kódot vizsgálja. Például:

Pontos egyezés a kiterjesztéssel

A szelektorkészletek kibővítése (alapértelmezés szerint) a pontos választók közötti keresést keresi. Nem számít, hogy a választó a "vezetõ csillagot" használja-e. Nem számít, hogy a két N-edik kifejezésnek ugyanaz a jelentése, ugyanúgy kell egyformán kialakítani, hogy egybeessen. Az egyetlen kivétel az attribútum választó idézetei, mert Kevesebb úgy véli, hogy ugyanolyan értékűek, és egybeesnek.

A vezető csillag nem számít. A * .class és .class kiválasztók egyenértékűek, de a kiterjesztés nem fogja összehasonlítani őket:

Ennek eredményeképpen:

Az ál-osztályok sorrendje fontos. Választók linkje: lebegés: meglátogatott és hivatkozás: meglátogatott: lebegés ugyanarra az elemcsoportra vonatkozik, de kiterjeszti őket másként kezelve:

Ennek eredményeképpen:

N-es kifejezés

Az N-edik kifejezés formája nem számít. Az N-es kifejezések 1n + 3 és n + 3 ekvivalensek, 3 ekvivalensek, de a kiterjesztés nem fogja összehasonlítani őket:

Ennek eredményeképpen:

Az attribútumválasztóban szereplő idézőjelek típusa nem fontos. Az alábbi bejegyzések egyenértékűek.

Ennek eredményeképpen:

"all" a Selector Extensionben

Amikor megadja az "all" kulcsszót az ál-osztály argumentumában: extend (). - ez kevesebbet mond, ha ezt a választót egy másik szelektor részéhez hasonlítja. A választó átmásolódik, és a választó egybeillesztett része csak egy bővítéssel lesz helyettesítve, és új választót hoz létre. Például:

Ennek eredményeképpen ilyen CSS-stílusok lesznek:

Feltételezhető, hogy a műveletnek ez a változata lényegében normál keresést és kicserélést hajt végre.

Kiválasztókészülékek szelektorok interpolálása

A szelektorok kibővítése NEM tudja összehasonlítani a változókkal rendelkező szelektort. Ha a választó egy változót tartalmaz, a kiterjesztés figyelmen kívül hagyja. Ehhez várási funkcióra van szükség, de ez nem egyszerű helyettesítés. Azonban a bővítmény egy interpolált választóhoz csatlakoztatható.

A változókiválasztó nem hasonlítható össze:

A célválasztó változójának kiterjesztése pedig nem egyezik semmi mással:

Mindkét korábbi példa a következőket tartalmazza:

Azonban. kiterjeszteni. az interpolált választóhoz csatlakoztatva:

Az előző LESS a következő CSS-re épül fel:

A @media belsejében lévő szelektorok lefedése / bővítése

A médiamegállapodáson belül írt szelektorok kiszélesítésének csak az ugyanazon médiamegállapodáson belüli választókkal kell megegyeznie:

A felső szelektorok kiválasztása egybeesik mindennel, beleértve a beépített médián belüli szelektort is:

A másolatok azonosítása

Eddig duplikátumokat nem találtak. Például:

Ennek eredményeképpen:

A kiterjesztések használatának esetei

klasszikus

Egy klasszikus felhasználási eset az, hogy elkerülje az alap osztály felvételét. Például, ha van

és olyan altípusú állatot szeretne, amely újra definiálja a háttérszínt, akkor két lehetősége van. Először módosítsa a HTML-kódot

vagy hozzon létre egy egyszerűsített kódot, és használja a bővítményt a Less alatt

A CSS méretének csökkentése

A szennyeződések minden tulajdonságot átmásolnak a választóba, ami felesleges duplikációhoz vezethet. Így kihasználhatod a kiterjesztéseket, nem pedig a szennyeződéseket, hogy a választógombot a használni kívánt tulajdonságokra mozgasd, ami kisebb CSS-t eredményez. Példa a szennyeződésre:

Ennek eredményeképpen:

Példa (a szelektorok kiterjesztésével):

Ennek eredményeképpen:

Stílusok kombinációja / Haladóbb szennyeződés

Egy másik felhasználási eset a szennyeződések alternatívája. a szennyeződések csak egyszerű szelektorként használhatók, ha két különböző HTML blokk van, de ugyanarra a stílushoz kell alkalmaznia őket, akkor a kiterjesztéseket használhatja. Például: