Funktsioonide kasutamine vähemas CSS-is

Less CSS on tugev ja dünaamiline CSS-i eelprotsessor, mis on viimastel aastatel pälvinud märkimisväärset tähelepanu ja populaarsust. Eeltöötlejana toimib see "Vanilla CSS" laiendusena, mis on traditsiooniline veebis kasutatava CSS-i stiilikeel. arendus, pakkudes hulgaliselt lisafunktsioone ja funktsioone, mis täiustavad üldist stiili kogemusi.

Kui olete standardse CSS-i kirjutamises hästi kursis, saate sujuvalt üle minna vähema CSS-i kasutamisele ilma järsu õppimiskõverata. See ühilduvus muudab teie olemasolevate CSS-teadmiste säilitamise lihtsaks, kasutades samal ajal Lessi täiustatud võimalusi.

Mis on funktsioonid ja miks need on olulised?

Programmeerimisel on funktsioon koodiplokk, mis täidab kindlat ülesannet. Saate seda ka kusagil mujal programmis uuesti kasutada. Funktsioonid võtavad tavaliselt andmeid, töötlevad neid ja tagastavad tulemused.

Nende abil on lihtne programmis dubleerivat koodi vähendada. Oletame näiteks, et teil on programm, mis arvutab allahindluse kasutaja sisestatud hinna alusel. Sees

keel nagu JavaScript, saate seda rakendada järgmiselt:

funktsioonikontrolli allahindlus(hind, lävi){
kui (hind >= lävi){
lase allahindlus = 5/100 * hind;
tagasi`Teie allahindlus on $${allahindlus}`;
 } muidu {
tagasi`Kahjuks see kaup ei kvalifitseeru allahindlusele. `
 }
}

Seejärel saate funktsiooni kutsuda ja sisestada hind ja künnis.

lase hind = kiire("Sisesta kauba hind:")
hoiatus (kontrollige Allahindlus (hind, 500))

Allahindluste kontrollimise loogika abstraheerimisega pole programm mitte ainult loetav, vaid teil on nüüd korduvkasutatav koodiplokk, mis töötleb allahindlust ja tagastab tulemuse. Funktsioonid saavad teha palju muud, kuid see on vaid põhitõed.

Funktsioonide mõistmine väiksemas CSS-is

Traditsioonilises CSS-is on teile kui arendajale saadaval väga piiratud hulk funktsioone. Üks CSS-i populaarsemaid funktsioone on calc()matemaatika funktsioon mis teeb täpselt seda, mis näib – teeb arvutusi ja kasutab tulemust CSS-is atribuudi väärtusena.

lk{
taustavärv: punane;
laius: arvut(13px- 4px);
}

Less CSS-is on mitu funktsiooni, mis teevad enamat kui lihtsalt aritmeetilisi tehteid. Üks funktsioon, mida võite rakenduses Less kohata, on kui funktsiooni. The kui funktsioon võtab kolm parameetrit: tingimus ja kaks väärtust. Allolev koodiplokk näitab, kuidas saate seda funktsiooni kasutada:

@laius: 10 pikslit;
@kõrgus: 20 pikslit;
div{
marginaal:kui((@laius > @kõrgus), 10 pikslit, 20 pikslit)
}

Ülaltoodud koodiplokis kontrollib Less kompilaator, kas muutuja laius (määratletud @ sümbol) on muutujast suurem kõrgus. Kui tingimus on tõene, tagastab funktsioon tingimuse järel esimese väärtuse (10 pikslit). Vastasel juhul tagastab funktsioon teise väärtuse (20 pikslit).

Pärast kompileerimist peaks CSS-i väljund välja nägema umbes selline:

div {
marginaal: 20px;
}

Kuidas kasutada Boole'i ​​vähem

Tõeväärtus on muutuja, millel on kaks võimalikku väärtust: tõsi või vale. Koos tõeväärtus() funktsiooni Less, saate salvestada avaldise tõese või väära väärtuse muutujas hilisemaks kasutamiseks. See toimib järgmiselt.

@text-color: punane;
@bg-värv: tõeväärtus(@tekstivärv = punane);

Ülaltoodud koodiplokis kontrollib Less kompilaator, kas tekst-värv on punane. Siis bg-värv muutuja salvestab väärtuse.

div{
taustavärv: kui(@bg-värv,roheline, kollane);
}

Ülaltoodud koodiplokk koostab midagi sellist:

div {
taustavärv: roheline;
}

Teksti asendamine stringis Funktsiooniga asendamine().

Süntaks jaoks asenda () funktsioon näeb välja selline:

asendada(string, muster, asendamine, lipud)

string tähistab stringi, mida soovite otsida ja asendada. muster on string, mida otsida. muster võib olla ka regulaaravaldis, kuid tavaliselt on see string. Pärast edukat vastet asendab selle vähem CSS-i kompilaator muster koos asendamine.

Valikuliselt asenda () funktsioon võib sisaldada ka lipud parameeter regulaaravaldise lippude jaoks.

@string: "Tere";
@muster: "tere";
@asendamine: "mina";
div:: enne{
sisu: asendada(@string,@muster,@asendamine)
}

Ülaltoodud koodiplokk peaks pärast kompileerimist andma tulemuseks järgmise:

div:: enne {
sisu: "Tere";
}

Funktsioonide loend vähemas CSS-is

Suvandis Vähem CSS-i kasutate väärtuste loendi määratlemiseks komasid või tühikuid. Näiteks:

@toidukaubad: "leib", "banaan", "kartul", "piim";

Võite kasutada pikkus () funktsioon loendis elementide arvu hindamiseks.

@tulemus: pikkus(@toidukaubad);

Võite kasutada ka ekstrakt () funktsiooni väärtuse eraldamiseks konkreetses positsioonis. Näiteks kui soovite saada kolmanda elemendi failis toidukaubad nimekirja, teete järgmist:

@kolmas element: ekstrakt(@toidukaubad, 3);

Erinevalt tavalistest programmeerimiskeeltest, kus loendi indeks algab nullist, on loendi algusindeks režiimis Less CSS alati 1.

Veel üks loendifunktsioon, mis võib olla kasulik veebisaitide loomisel rakendusega Less, on vahemik () funktsiooni. See võtab arvesse kolme parameetrit. Esimene parameeter määrab vahemiku alguspositsiooni. Teine parameeter näitab lõppasendit ja viimane parameeter määrab vahemiku iga üksuse vahelise suurenemise või vähendamise väärtuse. Kui seda pole esitatud, on vaikeväärtus 1.

div {
 veeris: vahemik (10px, 40px, 10);
}

Ülaltoodud koodiplokk peaks koostama järgmiseks:

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

Nagu näete, alustab vähem CSS-i kompilaator 10 pikslist, suurendades eelmist väärtust 10 võrra, kuni see jõuab lõpppositsioonini (40 pikslit).

Lihtsa veebisaidi loomine vähemate CSS-funktsioonidega

On aeg koondada kõik õpitu ja luua Less CSS-iga lihtne projekt. Looge kaust ja lisage index.htm ja stiil.vähem failid.

Ava index.htm faili ja lisage järgmine HTML-kood.

html>
<htmllang="en">
<pea>
<metamärgistik="UTF-8">
<metanimi="vaateava"sisu="laius = seadme laius, esialgne skaala = 1,0">
<linkrel="laadileht/vähem"tüüp="text/css"href="stiil.vaba" />
<pealkiri>Dokumentpealkiri>
pea>
<keha>
<divklass="konteiner">
<h1>
h1>
div>
<stsenaariumsrc=" https://cdn.jsdelivr.net/npm/less" >stsenaarium>
keha>
html>

Ülaltoodud koodiplokis on vanem "konteiner"div tühjaga h1 element. The src atribuut peal stsenaarium silt osutab teele vähem CSS-i kompilaatorisse.

Ilma selleta stsenaarium sildi, ei saa brauser teie koodist aru. Teise võimalusena saate installida oma arvutisse rakenduse Less CSS kaudu Sõlme paketihaldur (NPM), käivitades terminalis järgmise käsu:

npm install -g vähem

Kui olete valmis koostama .vähem faili, käivitage lihtsalt allolev käsk, määrates kindlasti faili, kuhu kompilaator peaks väljundi kirjutama.

lessc style.less style.css

Aastal stiil.vähem faili, looge kaks muutujat, nimelt: konteineri laius ja konteiner-bg-värv et esindada laiust ja taustavärvi "konteiner"div vastavalt.

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

Järgmisena looge kolm muutujat, nimelt: string, muster, ja asendamine. Seejärel lisage stiilid "konteiner"div ja h1 element.

@string: "Tere planeedi Maa laste poolt!";
@muster: "Planeedi Maa lapsed!";
@asendamine: "Pluuto elanikud!";
.konteiner{
laius: @container-width;
taustavärv: @container-bg-color;
polsterdus: kui(@container-width > 30 rem, vahemik (20 pikslit, 80 pikslit, 20),"");
piir: tahke;
}
h1:esimene laps::pärast{
sisu: asendada(@string,@muster,@asendamine);
}

Ülaltoodud koodiplokis on vahemik () funktsioon määrab polsterdus kinnistul "konteiner"div. Vähem kompilaator peaks kompileerima stiil.vähem faili järgmisesse:

.konteiner {
laius: 50rem;
taustavärv: kollane;
polsterdus: 20px 40px 60px 80px;
piir: tahke;
}
h1:esimene laps::pärast {
sisu: "TerealatesaelanikkekohtaPluuto!";
}

Kui avate index.htm brauseris, peaksite nägema seda:

Parandage oma tootlikkust CSS-i eelprotsessorite abil

Tavalistes programmeerimiskeeltes vähendavad funktsioonid kirjutatava koodi hulka ja minimeerivad vigu. CSS-i eelprotsessorid, nagu Less, pakuvad mitmeid funktsioone, mis muudavad CSS-koodi kirjutamise lihtsamaks.

CSS-i eelprotsessorid on abiks suurte failidega töötamisel. Need muudavad probleemide silumise lihtsamaks, parandades seeläbi arendaja tootlikkust.