Cum să utilizați funcțiile în mai puțin CSS

Less CSS este un preprocesor CSS robust și dinamic, care a atras atenție și popularitate semnificativă în ultimii ani. Ca preprocesor, servește ca o extensie a „Vanilla CSS”, limbajul tradițional de stil CSS folosit în web dezvoltare, oferind o serie de caracteristici și funcționalități suplimentare care îmbunătățesc stilul general experienţă.

Dacă sunteți bine versat în scrierea CSS standard, puteți trece fără probleme la utilizarea Less CSS, fără o curbă de învățare abruptă. Această compatibilitate facilitează menținerea cunoștințelor dvs. CSS existente, valorificând în același timp capabilitățile avansate ale Less.

Ce sunt funcțiile și de ce sunt importante?

În programare, o funcție este un bloc de cod care îndeplinește o anumită sarcină. De asemenea, îl puteți reutiliza în altă parte în program. De obicei, funcțiile preiau date, le procesează și returnează rezultatele.

Ele facilitează reducerea codului duplicat în cadrul unui program. De exemplu, să presupunem că aveți un program care calculează reducerea în funcție de prețul introdus de utilizator. Într-o limbaj precum JavaScript, îl puteți implementa astfel:

funcţiecheckDiscount(preț, prag){
dacă (preț >= prag){
lăsa reducere = 5/100 * Preț;
întoarcere„Reducerea dvs. este $${discount}`;
 } altfel {
întoarcere„Ne pare rău, acest articol nu se califică pentru o reducere. `
 }
}

Apoi puteți apela funcția și transmiteți Preț si prag.

lăsa pret = prompt("Introduceți prețul articolului: ")
alertă (verificațiDiscount (preț, 500))

Abstragând logica pentru verificarea reducerilor, programul nu este doar lizibil, dar acum aveți un bloc de cod reutilizabil care procesează reducerea și returnează rezultatul. Funcțiile pot face mult mai multe, dar acestea sunt doar elementele de bază.

Înțelegerea funcțiilor în Less CSS

În CSS tradițional, există un set foarte limitat de funcții disponibile pentru dvs. ca dezvoltator. Una dintre cele mai populare funcții din CSS este funcția matematică calc(). care face exact ceea ce pare — efectuează calcule și folosește rezultatul ca valoare de proprietate în CSS.

p{
culoare de fundal: roșu;
lăţime: calc(13px- 4px);
}

În Less CSS, există mai multe funcții care fac mai mult decât operații aritmetice. O funcție pe care o puteți întâlni în Less este dacă funcţie. The dacă funcția preia trei parametri: o condiție și două valori. Blocul de cod de mai jos arată cum puteți utiliza această funcție:

@lăţime: 10px;
@înălţime: 20px;
div{
marginea:dacă((@lăţime > @înălțime), 10px, 20px)
}

În blocul de cod de mai sus, compilatorul Less verifică dacă variabila lăţime (definit de @ simbol) este mai mare decât variabila înălţime. Dacă condiția este adevărată, funcția returnează prima valoare după condiție (10px). În caz contrar, funcția returnează a doua valoare (20px).

După compilare, rezultatul CSS ar trebui să arate cam așa:

div {
marginea: 20px;
}

Cum să utilizați un boolean în Less

Un boolean este o variabilă care are două valori posibile: Adevărat sau fals. Cu boolean() Funcție în Less, puteți stoca valoarea adevărată sau falsă a unei expresii într-o variabilă pentru o utilizare ulterioară. Iată cum funcționează.

@culoarea textului: roșu;
@bg-color: boolean(@text-color = red);

În blocul de cod de mai sus, compilatorul Less verifică dacă culoarea textului este rosu. Apoi, bg-culoare variabila stochează valoarea.

div{
culoare de fundal: dacă(@bg-color,verde galben);
}

Blocul de cod de mai sus se compilează în ceva de genul acesta:

div {
culoare de fundal: verde;
}

Înlocuirea textului într-un șir cu funcția replace().

Sintaxa pentru a inlocui() functia arata asa:

a inlocui(şir, model, înlocuire, steaguri)

şir reprezintă șirul în care doriți să căutați și să înlocuiți. model este șirul de căutat. model poate fi, de asemenea, o expresie regulată, dar de obicei este un șir. După o potrivire de succes, compilatorul Less CSS îl înlocuiește model cu înlocuire.

Opțional, a inlocui() funcția poate conține și steaguri parametru pentru steaguri de expresie regulată.

@şir: "Buna ziua";
@model: "bună";
@înlocuire: "eu";
div::inainte de{
conţinut: a inlocui(@şir,@model,@înlocuire)
}

Blocul de cod de mai sus ar trebui să aibă ca rezultat următoarele după compilare:

div::inainte de {
conţinut: "Bună";
}

Listează funcțiile în Less CSS

În Less CSS, utilizați virgule sau spații pentru a defini o listă de valori. De exemplu:

@bacanie: "pâine", "banană", "cartof", "lapte";

Puteți folosi lungime() funcția de evaluare a numărului de elemente din listă.

@rezultat: lungime(@bacanie);

De asemenea, puteți utiliza extrage() funcția de extragere a valorii într-o anumită poziție. De exemplu, dacă doriți să obțineți al treilea element din produse alimentare listă, faceți următoarele:

@al treilea element: extract(@bacanie, 3);

Spre deosebire de limbajele obișnuite de programare în care indexul listei începe de la 0, indexul de început al unei liste în Less CSS este întotdeauna 1.

O altă funcție de listă care ar putea fi utilă atunci când construiești site-uri web cu Less este gamă() funcţie. Ia trei parametri. Primul parametru specifică poziția de pornire în interval. Al doilea parametru indică poziția finală, iar ultimul parametru specifică valoarea de creștere sau scădere între fiecare element din interval. Dacă nu este furnizată, valoarea implicită este 1.

div {
 margine: interval (10px, 40px, 10);
}

Blocul de cod de mai sus ar trebui să fie compilat la următoarele:

div {
 marjă: 10px 20px 30px 40px;
}

După cum puteți vedea, compilatorul Less CSS începe de la 10px, crescând valoarea anterioară cu 10, până când ajunge la poziția finală (40px).

Construirea unui site simplu cu mai puține funcții CSS

Este timpul să reuniți tot ce ați învățat și să creați un proiect simplu cu Less CSS. Creați un folder și adăugați index.htm și stil.mai puţin fișiere.

Deschide index.htm fișier și adăugați următorul cod HTML.

html>
<htmllang="ro">
<cap>
<metaset de caractere=„UTF-8”>
<metaNume="vizor"conţinut=„width=device-width, initial-scale=1.0”>
<legăturărel="foaia de stil/mai puțin"tip=„text/css”href="stil.mai puțin" />
<titlu>Documenttitlu>
cap>
<corp>
<divclasă="container">
<h1>
h1>
div>
<scenariusrc=" https://cdn.jsdelivr.net/npm/less" >scenariu>
corp>
html>

În blocul de cod de mai sus, există un părinte "container"div cu un gol h1 element. The src atribut pe scenariu eticheta indică calea către compilatorul Less CSS.

Fără asta scenariu eticheta, browserul nu va putea înțelege codul dvs. Alternativ, puteți instala Less CSS pe computer prin Node Package Manager (NPM), rulând următoarea comandă în terminal:

npm install -g mai puțin

Ori de câte ori sunteți gata să compilați .Mai puțin fișier, pur și simplu rulați comanda de mai jos, asigurându-vă că specificați fișierul în care compilatorul ar trebui să scrie rezultatul.

lessc style.less style.css

În stil.mai puţin fișier, creați două variabile și anume: lățimea containerului și container-bg-color pentru a reprezenta lățimea și culoarea de fundal a "container"div respectiv.

@container-width: 50 rem;
@container-bg-color: galben;

Apoi, creați trei variabile și anume: şir, model, și înlocuire. Apoi adăugați stilurile pentru "container"div si h1 element.

@şir: "Bună ziua de la copiii planetei Pământ!";
@model: „copiii planetei Pământ!”;
@înlocuire: „locuitori din Pluto!”;
.container{
lăţime: @container-width;
culoare de fundal: @container-bg-color;
căptușeală: dacă(@container-width > 30rem, gamă(20px, 80px, 20),"");
frontieră: solid;
}
h1:primul copil::după{
conţinut: a inlocui(@şir,@model,@înlocuire);
}

În blocul de cod de mai sus, gamă() funcția setează căptușeală proprietate de pe "container"div. Compilatorul Less ar trebui să compileze fișierul stil.mai puţin fișier în următoarele:

.container {
lăţime: 50rem;
culoare de fundal: galben;
căptușeală: 20px 40px 60px 80px;
frontieră: solid;
}
h1:primul copil::după {
conţinut: "Buna ziuadincellocuitoridePluton!";
}

Când deschideți index.htm fișier în browser, iată ce ar trebui să vedeți:

Îmbunătățiți-vă productivitatea cu preprocesoare CSS

În limbajele obișnuite de programare, funcțiile reduc cantitatea de cod de care aveți nevoie pentru a scrie și minimizează erorile. Preprocesoarele CSS precum Less oferă mai multe caracteristici care facilitează scrierea codului CSS.

Preprocesoarele CSS sunt utile atunci când lucrați cu fișiere mari. Ele facilitează depanarea problemelor, îmbunătățind astfel productivitatea dezvoltatorului.