Kaj je Less CSS in kako ga uporabljate?

Če ste izkušen razvijalec CSS, se boste dobro zavedali pomanjkljivosti jezika. Še vedno nima razširjene podpore za dolgo zahtevane funkcije, kot sta gnezdenje in mixins.

Less (Leaner Style Sheets) je razširitev CSS s številnimi zmogljivimi funkcijami. Če poznate CSS, je učenje Lessa enostavno, ker je Lessova sintaksa zelo podobna.

Kako namestiti Less

Less lahko namestite z Upravitelj paketov JavaScript, NPM s tekom:

npm namesti manj -g

Po namestitvi lahko prevedete .manj datoteke v .css uporabljati manjsc ukaz. Na primer, naslednji ukaz se prevede stil.manj in izpiše rezultate v a style.css mapa.

manj sloga.manj sloga.css

Spremenljivke v Less

Za razliko od običajni CSS, ki za definiranje spremenljivk uporablja operator "--"., Less definira spremenljivke z uporabo simbola "@". Na primer:

@premer:40 slikovnih pik;
@višina:80 slikovnih pik;

Blok kode preprosto ustvari dve spremenljivki, širino in višino, ki imata dve vrednosti: 40px oziroma 80px. Običajna praksa je, da vzamemo običajno uporabljene vrednosti v CSS in jih shranimo v spremenljivko. To olajša spreminjanje teh vrednosti, saj obstaja le en vir nadzora.

Tukaj je opisano, kako lahko uporabite spremenljivke v programu Less. Ustvarite index.htm datoteko in dodajte naslednjo kodo:

html>
<htmljezik="en">
<glavo>
<metanabor znakov="UTF-8">
<metahttp-ekviv="Združljivo z X-UA"vsebino="IE=rob">
<metaime="viewport"vsebino="width=device-width, initial-scale=1.0">
<povezavarel="stylesheet"href="style.css">
<naslov>Uporaba manj CSSnaslov>
glavo>
<telo>
<div>
 Pozdrav od otrok planeta Zemlje!
div>
telo>
html>

Nato ustvarite a stil.manj datoteko in dodajte naslednje:

@premer:400 slikovnih pik;
@višina:400 slikovnih pik;
@vertical-center: center;
@txt-bela: bela;
@bg-rdeča: rgb(220, 11, 11);
@font-40:40 slikovnih pik;
div {
premer: @premer;
višina: @višina;
zaslon: flex;
barva: @txt-bela;
Barva ozadja: @bg-rdeča;
velikost pisave: @font-40;
}

Zdaj, ko lahko sestavite .manj datoteko v .css uporabljati manjsc ukaz:

manj sloga.manj sloga.css

Prevedeni CSS bi moral izgledati takole:

div {
premer: 400px;
višina: 400px;
zaslon: flex;
barva: bela;
Barva ozadja: #dc0b0b;
velikost pisave: 40px;
}

Ko odprete brskalnik, bi morali videti tole:

S spremenljivkami v programu Less lahko storite veliko več, kot je interpolacija, ki vam omogoča uporabo spremenljivk kot izbirnih imen, URL-jev in drugega. Tukaj je primer, kako implementirati interpolacijo spremenljivke:

@izbirnik po meri: posoda;
.@{izbirnik po meri} {
oblazinjenje: 10 slikovnih pik;
marža: 10 slikovnih pik;
meja: trdna 10 slikovnih pik;
}

Zgornji blok kode uporablja @{...} stavek za uporabo spremenljivke kot izbirnika. Ko bo prevedena, bo koda povzročila naslednje:

.posoda{
oblazinjenje: 10px;
marža: 10px;
meja: trdna 10px;
}

Aritmetične operacije v Less

Less nudi tudi podporo za aritmetične operacije, kot so seštevanje, odštevanje, deljenje in množenje. Te operacije delujejo s konstantami, vrednostmi in spremenljivkami.

@spremenljivka-1:5px;
// Operacija množenja med spremenljivko in konstanto
@spremenljivka-2:@spremenljivka-1 * 2
// Operacija seštevanja med vrednostjo in spremenljivko.
@spremenljivka-3:10 slikovnih pik + @spremenljivka-2

Kako uporabljati Mixins

Mixins vam omogoča ponovno uporabo slogov (ali kode CSS) v celotni tabeli slogov. drugo Razširitve CSS, kot je Sass ponujajo tudi Mixins. Za ponazoritev delovanja miksinov v Lessu ustvarite index.htm in dodajte to kodo:

html>
<htmljezik="en">
<glavo>
<metanabor znakov="UTF-8">
<metahttp-ekviv="Združljivo z X-UA"vsebino="IE=rob">
<metaime="viewport"vsebino="width=device-width, initial-scale=1.0">
<povezavarel="stylesheet"href="style.css">
<naslov>Uporaba manj CSSnaslov>
glavo>
<telo>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, acceptnda reiciendis
 facilis unde sequi.
div>
<str>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, acceptnda reiciendis
 facilis unde sequi.
str>
<str>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, acceptnda reiciendis
 facilis unde sequi.
str>
telo>
html>

Nato ustvarite a stil.manj datoteko in dodajte naslednje vrstice:

.vzorčno besedilo() {
Barva ozadja: rumena;
}
.prva črka() {
Barva ozadja: rdeča;
barva: bela;
velikost pisave: 30 slikovnih pik;
}
str {
.vzorčno besedilo();
}
str::prva-črka {
.prva črka();
}

V zgornjem bloku kode sta dva razreda mixin: .vzorčno besedilo in .prva črka. Ko želite uporabiti mixin v drugem delu slogovnega lista, se nanj preprosto obrnite po imenu z oklepaji na koncu: .mixin(). V brskalniku bi morali videti nekaj takega:

Style Nesting in Less

Recimo, da imate nadrejeni element div z dvema elementoma kot otrokoma: a str element in drugo div. Običajno, če želite oblikovati str element z rdečo barvo in div elemente z zeleno barvo, lahko uporabite naslednji pristop:

divstr {
barva: rdeča;
}
div {
barva: zelena
}

Less zagotavlja podobno funkcionalnost z uporabo gnezdenje. Torej bi bil v tem primeru Manjši ekvivalent zgornjega bloka kode:

div {
barva: zelena;
str {
barva: rdeča;
 }
}

Ne samo, da si je tako lažje omisliti glavo, poleg tega je koda bolj vzdržljiva. Sklicevanje na nadrejene izbirnike z manj je lažje z & operater. Na primer:

gumb {
Barva ozadja: modra;
meja: nobena;
&:lebdi {
Barva ozadja: siva;
transformirati: lestvica(1.2);
 }
}

Zgornji kodni blok bo pri prevajanju povzročil naslednjo kodo CSS:

gumb {
Barva ozadja: modra;
meja: nič;
}
gumb:lebdi {
Barva ozadja: siva;
transformirati: lestvica(1.2);
}

Razumevanje obsega in funkcij v Less

Tako kot običajni programski jeziki imajo spremenljivke obseg bloka, v katerem jih definirate. Za ponazoritev tega ustvarite novo index.htm datoteko in dodajte prvo predhodno kodo HTML. Nato dodajte naslednji blok v telo oznaka:

<divrazred="zunanji-div">
 Zunanji del mora biti rdeč.
<št />
<razponrazred="notranji-div">
 Notranji del mora biti zelen.
razpon>
div>

V stil.manj dodajte naslednje vrstice:

@bg-barva: rdeča;
telo {
velikost pisave: 40 slikovnih pik;
barva: bela;
marža: 20 slikovnih pik;
}
.notranji-div {
@bg-barva: zelena;
Barva ozadja: @bg-barva;
}
.zunanji-div {
Barva ozadja: @bg-barva;
}

The notranji-div blok na novo definira bg-barva spremenljivka, ki obsega samo ta blok. Torej zelena barva velja samo za ta razred in ne vpliva na globalni bg-barva spremenljivka. Ko prevedete in odprete rezultat v brskalniku, bi morali videti tole:

Less ponuja tudi priročne funkcije, ki so lahko v nekaterih primerih koristne. Na primer, če želite nastaviti slog samo, če je izpolnjen določen pogoj, lahko to storite z če funkcijo. Ta funkcija ima naslednjo sintakso:

če((pogoj), vrednost1, vrednost2)

Koda se vrne vrednost1 če je pogoj izpolnjen in vrednost2 drugače. Tukaj je primer:

@var1:20 slikovnih pik;
@var2:20 slikovnih pik;
div {
oblazinjenje: če((@var1 = @var2), 10 slikovnih pik, 20 slikovnih pik);
}

Zgornji blok kode bi moral pri prevajanju dati naslednji CSS:

div {
oblazinjenje: 10px;
}

Naredite več z manj in druge razširitve CSS

Na tisoče razvijalcev uporablja Less, da naredi pisanje CSS nekoliko prijetnejše. Osupljive funkcije, kot so funkcije, miksini in spremenljivke, so le majhen del tega, kar ponuja Less.

Manj je primeren tako za majhne kot velike projekte. Treba je omeniti, da je vredno preveriti druge enako neverjetne razširitvene jezike CSS, kot sta Sass in Stylus CSS.