Što je Less CSS i kako ga koristiti?

Ako ste iskusni CSS programer, bit ćete svjesni nedostataka jezika. Još uvijek mu nedostaje široko rasprostranjena podrška za dugotražene značajke poput gniježđenja i mixina.

Less (Leaner Style Sheets) je proširenje CSS-a s mnogo moćnih značajki. Ako poznajete CSS, učenje Lessa je jednostavno jer je Lessova sintaksa vrlo slična.

Kako instalirati manje

Možete instalirati Less s JavaScript Package Manager, NPM trčanjem:

npm instaliraj manje -g

Nakon instalacije možete kompajlirati .manje datoteke za .css koristiti manjesc naredba. Na primjer, sljedeća naredba se kompilira stil.manje i ispisuje rezultate u a stil.css datoteka.

manje stil.manje stil.css

Varijable u manje

Za razliku od regularni CSS, koji koristi operator "--" za definiranje varijabli, Less definira varijable pomoću simbola "@". Na primjer:

@širina:40 px;
@visina:80 px;

Blok koda jednostavno stvara dvije varijable, širinu i visinu koje imaju dvije vrijednosti: 40px i 80px. Uobičajena je praksa uzeti uobičajeno korištene vrijednosti u CSS-u i pohraniti ih u varijablu. To olakšava izmjenu tih vrijednosti jer postoji samo jedan izvor kontrole.

Evo kako možete koristiti varijable u Lessu. Stvorite indeks.htm datoteku i dodajte sljedeći šablonski kod:

html>
<htmljezik="en">
<glava>
<metaskup znakova="UTF-8">
<metahttp-ekviv="X-UA-kompatibilno"sadržaj="IE=rub">
<metaIme="viewport"sadržaj="width=device-width, initial-scale=1.0">
<vezarel="list stilova"href="style.css">
<titula>Upotreba manje CSS-atitula>
glava>
<tijelo>
<div>
 Pozdrav od djece planete Zemlje!
div>
tijelo>
html>

Zatim stvorite a stil.manje datoteku i dodajte sljedeće:

@širina:400 px;
@visina:400 px;
@vertical-center: centar;
@txt-bijelo: bijela;
@bg-red: rgb(220, 11, 11);
@font-40:40 px;
div {
širina: @širina;
visina: @visina;
prikaz: savijati;
boja: @txt-bijela;
boja pozadine: @bg-crveno;
veličina fonta: @font-40;
}

Sada, kada možete sastaviti .manje datoteka u .css koristiti manjesc naredba:

manje stil.manje stil.css

Sastavljeni CSS trebao bi izgledati ovako:

div {
širina: 400px;
visina: 400px;
prikaz: savijati;
boja: bijela;
boja pozadine: #dc0b0b;
veličina fonta: 40px;
}

Kada otvorite preglednik, ovo biste trebali vidjeti:

Postoji mnogo više što možete učiniti s varijablama u Lessu, kao što je interpolacija koja vam omogućuje da koristite varijable kao nazive selektora, URL-ove i više. Evo primjera kako implementirati interpolaciju varijable:

@prilagođeni-selektor: spremnik;
.@{custom-selector} {
podstava: 10 px;
margina: 10 px;
granica: čvrsta 10 px;
}

Gornji blok koda koristi @{...} klauzula za korištenje varijable kao selektora. Kada se prevede, kod će rezultirati sljedećim:

.kontejner{
podstava: 10px;
margina: 10px;
granica: čvrsta 10px;
}

Aritmetičke operacije u Less

Less također pruža podršku za aritmetičke operacije poput zbrajanja, oduzimanja, dijeljenja i množenja. Ove operacije rade s konstantama, vrijednostima i varijablama.

@varijabla-1:5 px;
// Operacija množenja između varijable i konstante
@varijabla-2:@varijabla-1 * 2
// Operacija zbrajanja između vrijednosti i varijable.
@varijabla-3:10 px + @varijabla-2

Kako koristiti Mixins

Mixins vam omogućuje ponovnu upotrebu stilova (ili CSS koda) u cijeloj tablici stilova. ostalo CSS proširenja poput Sass također ponuditi Mixins. Da biste ilustrirali kako miksini rade u Lessu, izradite index.htm i dodajte sljedeći kod:

html>
<htmljezik="en">
<glava>
<metaskup znakova="UTF-8">
<metahttp-ekviv="X-UA-kompatibilno"sadržaj="IE=rub">
<metaIme="viewport"sadržaj="width=device-width, initial-scale=1.0">
<vezarel="list stilova"href="style.css">
<titula>Upotreba manje CSS-atitula>
glava>
<tijelo>
<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, acceptenda 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, acceptenda 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, acceptenda reiciendis
 facilis unde sequi.
str>
tijelo>
html>

Zatim stvorite a stil.manje datoteku i dodajte sljedeće retke:

.uzorak-tekst() {
boja pozadine: žuta;
}
.prvo slovo() {
boja pozadine: Crvena;
boja: bijela;
veličina fonta: 30 px;
}
str {
.uzorak-tekst();
}
str::prvo slovo {
.prvo slovo();
}

U gornjem bloku koda postoje dvije klase mixina: .uzorak-tekst i .prvo slovo. Kada želite upotrijebiti mixin u drugom dijelu lista stilova, jednostavno ga navedite imenom sa zagradama na kraju: .mixin(). U pregledniku biste trebali vidjeti nešto poput ovoga:

Stilsko ugniježđenje u manje

Recimo da imate nadređeni div s dva elementa kao svojom djecom: a str element i drugo div. Obično, ako želite stilizirati str element s crvenom bojom i div elemenata zelene boje, možete koristiti sljedeći pristup:

divstr {
boja: Crvena;
}
div {
boja: zelena
}

Less pruža sličnu funkcionalnost korištenjem gniježđenje. Dakle, u ovom slučaju, manji ekvivalent bloka koda iznad bi bio:

div {
boja: zelena;
str {
boja: Crvena;
 }
}

Ne samo da je ovo lakše zamotati oko sebe, to također čini kod lakšim za održavanje. Referenciranje roditeljskih selektora s manje je lakše s & operater. Na primjer:

dugme {
boja pozadine: plava;
granica: nijedan;
&:lebdjeti {
boja pozadine: siva;
transformirati: skala(1.2);
 }
}

Gornji blok koda rezultirat će sljedećim CSS kodom kada se prevede:

dugme {
boja pozadine: plava;
granica: nikakav;
}
dugme:lebdjeti {
boja pozadine: siva;
transformirati: mjerilo(1.2);
}

Razumijevanje opsega i funkcija u Lessu

Kao i obični programski jezici, varijable imaju opseg bloka u kojem ih definirate. Da biste to ilustrirali, stvorite novi indeks.htm datoteku i dodajte prvi HTML predložak koda koji ste ranije dali. Zatim dodajte sljedeći blok u tijelo označiti:

<divrazreda="vanjski-div">
 Vanjski sloj bi trebao biti crven.
<br />
<rasponrazreda="unutarnji-div">
 Unutarnji div bi trebao biti zelen.
raspon>
div>

u stil.manje datoteku dodajte sljedeće retke:

@bg-boja: Crvena;
tijelo {
veličina fonta: 40 px;
boja: bijela;
margina: 20 px;
}
.unutarnji-div {
@bg-boja: zelena;
boja pozadine: @bg-boja;
}
.vanjski-div {
boja pozadine: @bg-boja;
}

The unutarnji-div blok redefinira bg-boja varijabla, ograničena samo na taj blok. Dakle, zelena boja se odnosi samo na tu klasu i ne utječe na globalnu bg-boja varijabla. Kada kompajlirate i otvorite rezultat u pregledniku, ovo bi trebali vidjeti:

Less također nudi praktične funkcije koje mogu biti korisne u nekim scenarijima. Na primjer, ako želite postaviti stil samo ako je ispunjen određeni uvjet, to možete učiniti pomoću ako funkcija. Ova funkcija ima sljedeću sintaksu:

ako((uvjet), vrijednost1, vrijednost2)

Kod se vraća vrijednost1 ako je uvjet ispunjen i vrijednost2 inače. Evo primjera:

@var1:20 px;
@var2:20 px;
div {
podstava: ako((@var1 = @var2), 10 px, 20 px);
}

Gornji blok koda trebao bi rezultirati sljedećim CSS-om kada se prevede:

div {
podstava: 10px;
}

Učinite više s manje i druga CSS proširenja

Tisuće programera koriste Less kako bi pisanje CSS-a učinili pomalo ugodnim. Nevjerojatne značajke poput funkcija, mixina i varijabli samo su mali dio onoga što nudi Less.

Less je pogodan i za male i za velike projekte. Vrijedno je napomenuti da druge jednako nevjerojatne jezike proširenja za CSS kao što su Sass i Stylus CSS vrijedi provjeriti.