Ce este mai puțin CSS și cum îl folosiți?

Dacă ești un dezvoltator CSS cu experiență, vei fi conștient de dezavantajele limbajului. Încă îi lipsește suportul pe scară largă pentru funcții solicitate îndelung, cum ar fi imbricarea și mixurile.

Less (Leaner Style Sheets) este o extensie a CSS cu multe caracteristici puternice. Dacă știi CSS, atunci învățarea Less este ușoară, deoarece sintaxa lui Less este foarte asemănătoare.

Cum se instalează mai puțin

Puteți instala Less cu Manager de pachete JavaScript, NPM rulând:

npm instalează mai puțin -g

După instalare, puteți compila .Mai puțin fişiere către .css folosind mai putin comanda. De exemplu, următoarea comandă se compilează stil.mai puţin și emite rezultatele în a stil.css fişier.

lessc style.less style.css

Variabile în Less

Spre deosebire de CSS obișnuit, care utilizează operatorul „--” pentru a defini variabile, Less definește variabile folosind simbolul „@”. De exemplu:

@lăţime:40px;
@înălţime:80px;

Blocul de cod creează pur și simplu două variabile, lățime și înălțime, care dețin două valori: 40px și, respectiv, 80px. Este o practică obișnuită să luați valori utilizate în mod obișnuit în CSS și să le stocați într-o variabilă. Acest lucru facilitează modificarea acestor valori, deoarece există o singură sursă de control.

Iată cum puteți utiliza variabile în Less. Creaza un index.htm fișier și adăugați următorul cod standard:

html>
<htmllang="ro">
<cap>
<metaset de caractere=„UTF-8”>
<metahttp-echiv=„Compatibil X-UA”conţinut=„IE=margine”>
<metaNume="vizor"conţinut=„width=device-width, initial-scale=1.0”>
<legăturărel="foaia de stil"href=„style.css”>
<titlu>Folosind mai puțin CSStitlu>
cap>
<corp>
<div>
 Salutare din partea copiilor planetei Pământ!
div>
corp>
html>

Apoi, creați un stil.mai puţin fișier și adăugați următoarele:

@lăţime:400px;
@înălţime:400px;
@vertical-center: centru;
@txt-alb: alb;
@bg-red: rgb(220, 11, 11);
@font-40:40px;
div {
lăţime: @lăţime;
înălţime: @înălţime;
afişa: contracta;
culoare: @txt-alb;
culoare de fundal: @bg-red;
marimea fontului: @font-40;
}

Acum, când puteți compila .Mai puțin dosar la .css folosind mai putin comanda:

lessc style.less style.css

CSS-ul compilat ar trebui să arate astfel:

div {
lăţime: 400px;
înălţime: 400px;
afişa: contracta;
culoare: alb;
culoare de fundal: #dc0b0b;
marimea fontului: 40px;
}

Când deschideți browserul, iată ce ar trebui să vedeți:

Există mult mai multe pe care le puteți face cu variabilele din Less, cum ar fi interpolarea, care vă permite să utilizați variabile ca nume de selectoare, adrese URL și multe altele. Iată un exemplu de implementare a interpolării variabilelor:

@custom-selector: recipient;
.@{custom-selector} {
căptușeală: 10px;
marginea: 10px;
frontieră: solid 10px;
}

Blocul de cod de mai sus folosește @{...} clauză pentru a utiliza o variabilă ca selector. Când este compilat, codul va avea ca rezultat următoarele:

.container{
căptușeală: 10px;
marginea: 10px;
frontieră: solid 10px;
}

Operații aritmetice în Less

Less oferă, de asemenea, suport pentru operații aritmetice precum adunarea, scăderea, împărțirea și înmulțirea. Aceste operații funcționează cu constante, valori și variabile.

@variabila-1:5px;
// Operație de multiplicare între variabilă și constantă
@variabila-2:@variabila-1 * 2
// Operație de adunare între valoare și variabilă.
@variabila-3:10px + @variabila-2

Cum se utilizează Mixins

Mixins vă permite să reutilizați stilurile (sau codul CSS) în toată foaia de stil. Alte Extensii CSS precum Sass oferă și Mixins. Pentru a ilustra cum funcționează mixin-urile în Less, creați un index.htm și adăugați următorul cod:

html>
<htmllang="ro">
<cap>
<metaset de caractere=„UTF-8”>
<metahttp-echiv=„Compatibil X-UA”conţinut=„IE=margine”>
<metaNume="vizor"conţinut=„width=device-width, initial-scale=1.0”>
<legăturărel="foaia de stil"href=„style.css”>
<titlu>Folosind mai puțin CSStitlu>
cap>
<corp>
<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, assumenda reiciendis
 facilitat unde sequi.
div>
<p>
 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, assumenda reiciendis
 facilitat unde sequi.
p>
<p>
 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, assumenda reiciendis
 facilitat unde sequi.
p>
corp>
html>

Apoi, creați un stil.mai puţin fișier și adăugați următoarele rânduri:

.text mostră() {
culoare de fundal: galben;
}
.prima literă() {
culoare de fundal: roșu;
culoare: alb;
marimea fontului: 30px;
}
p {
.text mostră();
}
p::prima literă {
.prima literă();
}

În blocul de cod de mai sus, există două clase de mixin: .text mostră și .prima literă. Când doriți să utilizați un mixin într-o altă parte a foii de stil, pur și simplu faceți referire la el după nume cu paranteze la sfârșit: .mixin(). În browser, ar trebui să vedeți ceva de genul acesta:

Stil Nesting in Less

Să presupunem că aveți un div părinte cu două elemente ca copii: a p element și altul div. De obicei, dacă doriți să stilați p element cu culoarea roșu și div elemente cu culoarea verde, puteți utiliza următoarea abordare:

divp {
culoare: roșu;
}
div {
culoare: verde
}

Less oferă funcționalități similare prin utilizarea lui cuibărit. Deci, în acest caz, echivalentul Less al blocului de cod de mai sus ar fi:

div {
culoare: verde;
p {
culoare: roșu;
 }
}

Nu numai că este mai ușor de înțeles, dar face și codul mai ușor de întreținut. Referirea selectoarelor de părinți cu mai puțin este mai ușoară cu & operator. De exemplu:

buton {
culoare de fundal: albastru;
frontieră: nici unul;
&:planare {
culoare de fundal: gri;
transforma: scara(1.2);
 }
}

Blocul de cod de mai sus va avea ca rezultat următorul cod CSS atunci când este compilat:

buton {
culoare de fundal: albastru;
frontieră: nici unul;
}
buton:planare {
culoare de fundal: gri;
transforma: scară(1.2);
}

Înțelegerea domeniului de aplicare și a funcțiilor în Less

La fel ca limbajele obișnuite de programare, variabilele au domeniul de aplicare al blocului în care le definiți. Pentru a ilustra acest lucru, creați un nou index.htm fișier și adăugați primul cod HTML standard furnizat mai devreme. Apoi adăugați următorul bloc în corp etichetă:

<divclasă="div-exterior">
 Div-ul extern ar trebui să fie roșu.
<br />
<spanclasă="inner-div">
 Div-ul interior ar trebui să fie verde.
span>
div>

În stil.mai puţin fișier, adăugați următoarele rânduri:

@bg-color: roșu;
corp {
marimea fontului: 40px;
culoare: alb;
marginea: 20px;
}
.inner-div {
@bg-color: verde;
culoare de fundal: @bg-color;
}
.div-exterior {
culoare de fundal: @bg-color;
}

The interior-div bloc redefinește bg-culoare variabilă, acoperită doar de acel bloc. Deci culoarea verde se aplică doar acelei clase și nu afectează globalul bg-culoare variabil. Când compilați și deschideți rezultatul în browser, iată ce ar trebui să vedeți:

Less oferă, de asemenea, funcții utile care pot fi benefice în unele scenarii. De exemplu, dacă doriți să setați un stil numai dacă este îndeplinită o anumită condiție, puteți face asta cu dacă funcţie. Această funcție are următoarea sintaxă:

dacă((condiție), valoare1, valoare2)

Codul revine valoare1 dacă condiția este îndeplinită și valoarea2 in caz contrar. Iată un exemplu:

@var1:20px;
@var2:20px;
div {
căptușeală: dacă((@var1 = @var2), 10px, 20px);
}

Blocul de cod de mai sus ar trebui să aibă ca rezultat următorul CSS atunci când este compilat:

div {
căptușeală: 10px;
}

Faceți mai mult cu mai puțin și cu alte extensii CSS

Mii de dezvoltatori folosesc Less pentru a face scrierea CSS puțin plăcută. Funcțiile uimitoare, cum ar fi funcțiile, mixurile și variabilele sunt doar o mică parte din ceea ce oferă Less.

Less este potrivit atât pentru proiectele mici, cât și pentru cele mari. Merită remarcat faptul că și alte limbaje de extensie CSS la fel de uimitoare, cum ar fi Sass și Stylus CSS, merită verificate.