Kako uporabljati funkcije v manj CSS

Less CSS je robusten in dinamičen predprocesor CSS, ki je v zadnjih letih pritegnil veliko pozornosti in priljubljenosti. Kot predprocesor služi kot razširitev »Vanilla CSS«, tradicionalnega slogovnega jezika CSS, ki se uporablja v spletu. razvoj z zagotavljanjem niza dodatnih funkcij in funkcij, ki izboljšajo celoten slog izkušnje.

Če ste dobro seznanjeni s pisanjem standardnega CSS, lahko nemoteno preidete na uporabo Less CSS brez strme krivulje učenja. Ta združljivost olajša vzdrževanje obstoječega znanja o CSS, hkrati pa izkorišča napredne zmogljivosti Less.

Kaj so funkcije in zakaj so pomembne?

V programiranju je funkcija blok kode, ki izvaja določeno nalogo. Uporabite ga lahko tudi nekje drugje v programu. Funkcije običajno sprejmejo podatke, jih obdelajo in vrnejo rezultate.

Omogočajo preprosto zmanjšanje podvojene kode v programu. Na primer, recimo, da imate program, ki izračuna popust na podlagi cene, ki jo uporabnik vnese. V jezik, kot je JavaScript, bi ga lahko implementirali takole:

funkcijopreveriPopust(cena, prag){
če (cena >= prag){
pustiti popust = 5/100 * cena;
vrnitev`Vaš popust je $${popust}`;
 } drugače {
vrnitev`Oprostite, ta izdelek ne izpolnjuje pogojev za popust. `
 }
}

Nato lahko pokličete funkcijo in posredujete cena in prag.

pustiti cena = hitro("Vnesite ceno artikla: ")
opozorilo (preveriPopust (cena, 500))

Z abstrahiranjem logike za preverjanje popustov program ni samo berljiv, ampak imate zdaj ponovno uporabljiv blok kode, ki obdela popust in vrne rezultat. Funkcije lahko naredijo še veliko več, a to so le osnove.

Razumevanje funkcij v manj CSS

V tradicionalnem CSS je kot razvijalec na voljo zelo omejen nabor funkcij. Ena najbolj priljubljenih funkcij v CSS je calc()matematična funkcija ki naredi točno to, kar se zdi – izvaja izračune in uporablja rezultat kot vrednost lastnosti v CSS.

str{
Barva ozadja: rdeča;
premer: kalk(13px- 4px);
}

V Less CSS obstaja več funkcij, ki opravljajo več kot le aritmetične operacije. Ena funkcija, na katero lahko naletite v Lessu, je če funkcijo. The če funkcija ima tri parametre: pogoj in dve vrednosti. Spodnji blok kode prikazuje, kako lahko uporabite to funkcijo:

@premer: 10 slikovnih pik;
@višina: 20 slikovnih pik;
div{
marža:če((@premer > @višina), 10 slikovnih pik, 20 slikovnih pik)
}

V zgornjem bloku kode prevajalnik Less preveri, ali spremenljivka premer (opredeljeno z @ simbol) je večji od spremenljivke višina. Če je pogoj resničen, funkcija vrne prvo vrednost za pogojem (10px). V nasprotnem primeru funkcija vrne drugo vrednost (20px).

Po prevajanju bi moral izhod CSS izgledati nekako takole:

div {
marža: 20px;
}

Kako uporabiti logično vrednost v Less

Logična vrednost je spremenljivka, ki ima dve možni vrednosti: prav oz lažno. z boolean() funkcijo v Less, lahko shranite resnično ali napačno vrednost izraza v spremenljivko za kasnejšo uporabo. Evo, kako to deluje.

@barva besedila: rdeča;
@bg-barva: boolean (@text-color = red);

V zgornjem bloku kode prevajalnik Less preveri, če barva besedila je rdeča. Potem, bg-barva spremenljivka shrani vrednost.

div{
Barva ozadja: če(@bg-barva,zelena, rumena);
}

Zgornji blok kode se prevede v nekaj takega:

div {
Barva ozadja: zelena;
}

Zamenjava besedila znotraj niza s funkcijo replace().

Sintaksa za zamenjati() funkcija izgleda takole:

zamenjati(vrvica, vzorec, zamenjava, zastave)

vrvica predstavlja niz, v katerem želite iskati in zamenjati. vzorec je niz za iskanje. vzorec je lahko tudi regularni izraz, vendar je običajno niz. Po uspešnem ujemanju to zamenja prevajalnik Less CSS vzorec z zamenjava.

Po želji, zamenjati() funkcija lahko vsebuje tudi zastave parameter za zastavice regularnega izraza.

@vrvica: "Zdravo";
@vzorec: "zdravo";
@zamenjava: "jaz";
div::prej{
vsebino: zamenjati(@vrvica,@vzorec,@zamenjava)
}

Zgornji blok kode bi moral po prevajanju dati naslednje:

div::prej {
vsebino: "zdravo";
}

Seznam funkcij v manj CSS

V Less CSS uporabite vejice ali presledke za določanje seznama vrednosti. Na primer:

@živila: "kruh", "banana", "krompir", "mleko";

Lahko uporabite dolžina() funkcija za ovrednotenje števila elementov na seznamu.

@rezultat: dolžina (@groceries);

Uporabite lahko tudi ekstrakt () funkcija za ekstrahiranje vrednosti na določenem mestu. Na primer, če želite dobiti tretji element v živila seznam, storite naslednje:

@tretji element: ekstrakt (@groceries, 3);

Za razliko od običajnih programskih jezikov, kjer se indeks seznama začne z 0, je začetni indeks seznama v Less CSS vedno 1.

Druga funkcija seznama, ki bi lahko prišla prav pri gradnji spletnih mest z Lessom, je obseg() funkcijo. Zajema tri parametre. Prvi parameter določa začetni položaj v območju. Drugi parameter označuje končno pozicijo, zadnji parameter pa vrednost prirastka ali zmanjšanja med vsakim elementom v obsegu. Če ni podana, je privzeta vrednost 1.

div {
 rob: obseg (10px, 40px, 10);
}

Zgornji blok kode bi se moral sestaviti v naslednje:

div {
 rob: 10px 20px 30px 40px;
}

Kot lahko vidite, prevajalnik Less CSS začne od 10px, poveča prejšnjo vrednost za 10, dokler ne doseže končnega položaja (40px).

Izdelava preprostega spletnega mesta z manj funkcijami CSS

Čas je, da združite vse, kar ste se naučili, in ustvarite preprost projekt z manj CSS. Ustvarite mapo in dodajte index.htm in stil.manj datoteke.

Odprite index.htm in dodajte naslednjo kodo HTML.

html>
<htmljezik="en">
<glavo>
<metanabor znakov="UTF-8">
<metaime="viewport"vsebino="width=device-width, initial-scale=1.0">
<povezavarel="stylesheet/less"vrsta="besedilo/css"href="style.less" />
<naslov>Dokumentnaslov>
glavo>
<telo>
<divrazred="posoda">
<h1>
h1>
div>
<scenarijsrc=" https://cdn.jsdelivr.net/npm/less" >scenarij>
telo>
html>

V zgornjem kodnem bloku je nadrejeni element "posoda"div s praznim h1 element. The src atribut na scenarij kaže na pot do prevajalnika Less CSS.

Brez tega scenarij brskalnik ne bo mogel razumeti vaše kode. Druga možnost je, da namestite Less CSS na svoj računalnik prek Node Package Manager (NPM), tako da v terminalu zaženete naslednji ukaz:

npm install -g manj

Kadarkoli ste pripravljeni prevesti .manj preprosto zaženite spodnji ukaz in se prepričajte, da ste določili datoteko, v katero naj prevajalnik zapiše izhod.

manj sloga.manj sloga.css

V stil.manj datoteko, ustvarite dve spremenljivki, in sicer: širina posode in kontejner-bg-barva za predstavitev širine in barve ozadja "posoda"div oz.

@širina-vsebnika: 50rem;
@kontejner-bg-barva: rumena;

Nato ustvarite tri spremenljivke, in sicer: vrvica, vzorec, in zamenjava. Nato dodajte sloge za "posoda"div in h1 element.

@vrvica: "Pozdravljeni od otrok planeta Zemlja!";
@vzorec: "otroci planeta Zemlja!";
@zamenjava: "prebivalci Plutona!";
.posoda{
premer: @širina-vsebnika;
Barva ozadja: @kontejner-bg-barva;
oblazinjenje: če(@širina-vsebnika > 30rem, obseg (20 slikovnih pik, 80 slikovnih pik, 20),"");
meja: trdna;
}
h1:prvi otrok::po{
vsebino: zamenjati(@vrvica,@vzorec,@zamenjava);
}

V zgornjem bloku kode je obseg() funkcija nastavi oblazinjenje lastnina na "posoda"div. Prevajalnik Less bi moral prevesti stil.manj datoteko v naslednje:

.posoda {
premer: 50rem;
Barva ozadja: rumena;
oblazinjenje: 20px 40px 60px 80px;
meja: trdna;
}
h1:prvi otrok::po {
vsebino: "zdravoodtheprebivalcevodPluton!";
}

Ko odprete index.htm datoteke v brskalniku, bi morali videti tole:

Izboljšajte svojo produktivnost s predprocesorji CSS

V običajnih programskih jezikih funkcije zmanjšajo količino kode, ki jo morate napisati, in minimizirajo napake. Predprocesorji CSS, kot je Less, ponujajo več funkcij, ki olajšajo pisanje kode CSS.

Predprocesorji CSS pridejo prav pri delu z velikimi datotekami. Omogočajo lažje odpravljanje napak in s tem izboljšajo produktivnost razvijalca.