Kako koristiti funkcije u manje CSS-a

Less CSS robustan je i dinamičan CSS predprocesor koji je privukao značajnu pozornost i popularnost posljednjih godina. Kao predprocesor, služi kao proširenje "Vanilla CSS-a", tradicionalnog stilskog jezika CSS-a koji se koristi na webu razvoj, pružanjem niza dodatnih značajki i funkcionalnosti koje poboljšavaju cjelokupni stil iskustvo.

Ako ste dobro vješti u pisanju standardnog CSS-a, možete neprimjetno prijeći na korištenje Less CSS-a bez strme krivulje učenja. Ova kompatibilnost olakšava održavanje vašeg postojećeg znanja o CSS-u dok iskorištava napredne mogućnosti Lessa.

Što su funkcije i zašto su važne?

U programiranju, funkcija je blok koda koji obavlja određeni zadatak. Također ga možete ponovno upotrijebiti negdje drugdje u programu. Funkcije obično uzimaju podatke, obrađuju ih i vraćaju rezultate.

Oni olakšavaju smanjenje duplikata koda unutar programa. Na primjer, recimo da imate program koji obračunava popust na temelju cijene koju korisnik unese. U

jezika poput JavaScripta, možete ga implementirati ovako:

funkcijaprovjeriPopust(cijena, prag){
ako (cijena >= prag){
neka popust = 5/100 * cijena;
povratak`Vaš popust je $${discount}`;
 } drugo {
povratak`Nažalost, ovaj artikl ne ispunjava uvjete za popust. `
 }
}

Zatim možete pozvati funkciju i unijeti cijena i prag.

neka cijena = brz("Unesite cijenu artikla: ")
upozorenje (provjeriPopust (cijena, 500))

Apstrahiranjem logike za provjeru popusta, program nije samo čitljiv, već sada imate blok koda za višekratnu upotrebu koji obrađuje popust i vraća rezultat. Postoji još mnogo toga što funkcije mogu učiniti, ali ovo su samo osnove.

Razumijevanje funkcija u manje CSS-u

U tradicionalnom CSS-u postoji vrlo ograničen skup funkcija koje su vam dostupne kao programeru. Jedna od najpopularnijih funkcija u CSS-u je calc()matematička funkcija koji radi točno ono što se čini - izvodi izračune i koristi rezultat kao vrijednost svojstva u CSS-u.

str{
boja pozadine: Crvena;
širina: kalk(13px- 4px);
}

U Less CSS-u postoji nekoliko funkcija koje rade više od pukih aritmetičkih operacija. Jedna funkcija na koju možete naići u Lessu je ako funkcija. The ako funkcija ima tri parametra: uvjet i dvije vrijednosti. Blok koda ispod pokazuje kako možete koristiti ovu funkciju:

@širina: 10 px;
@visina: 20 px;
div{
margina:ako((@širina > @visina), 10 px, 20 px)
}

U gornjem bloku koda, prevodilac Less provjerava je li varijabla širina (definirano prema @ simbol) je veći od varijable visina. Ako je uvjet istinit, funkcija vraća prvu vrijednost nakon uvjeta (10px). U suprotnom, funkcija vraća drugu vrijednost (20px).

Nakon kompilacije, CSS izlaz bi trebao izgledati otprilike ovako:

div {
margina: 20px;
}

Kako koristiti Booleov u Less

Boolean je varijabla koja ima dvije moguće vrijednosti: pravi ili lažno. s Boolean() funkciju u Lessu, možete pohraniti istinitu ili lažnu vrijednost izraza u varijablu za kasniju upotrebu. Evo kako to radi.

@boja teksta: Crvena;
@bg-boja: boolean(@text-color = red);

U gornjem bloku koda, prevodilac Less provjerava je li boja teksta je crvena. Onda bg-boja varijabla pohranjuje vrijednost.

div{
boja pozadine: ako(@bg-boja,zelena, žuta);
}

Gornji blok koda kompajlira se na nešto poput ovoga:

div {
boja pozadine: zelena;
}

Zamjena teksta unutar niza s funkcijom replace().

Sintaksa za zamijeniti() funkcija izgleda ovako:

zamijeniti(niz, uzorak, zamjena, zastave)

niz predstavlja niz u kojem želite pretraživati ​​i zamijeniti. uzorak je niz za pretraživanje. uzorak također može biti regularni izraz, ali obično je niz. Nakon uspješnog podudaranja, Less CSS prevodilac to zamjenjuje uzorak s zamjena.

Po izboru, zamijeniti() funkcija također može sadržavati zastave parametar za zastavice regularnog izraza.

@niz: "Zdravo";
@uzorak: "zdravo";
@zamjena: "ja";
div::prije{
sadržaj: zamijeniti(@niz,@uzorak,@zamjena)
}

Gornji blok koda trebao bi rezultirati sljedećim nakon kompilacije:

div::prije {
sadržaj: "bok";
}

Popis funkcija u manje CSS-a

U Less CSS-u koristite zareze ili razmake za definiranje popisa vrijednosti. Na primjer:

@namirnice: "kruh", "banana", "krumpir", "mlijeko";

Možete koristiti duljina () funkcija za procjenu broja elemenata na popisu.

@proizlaziti: duljina (@namirnice);

Također možete koristiti ekstrakt() funkcija za izdvajanje vrijednosti na određenoj poziciji. Na primjer, ako želite dobiti treći element u namirnice popis, učinite sljedeće:

@treći-element: ekstrakt(@namirnice, 3);

Za razliku od uobičajenih programskih jezika gdje indeks popisa počinje od 0, početni indeks popisa u Less CSS-u uvijek je 1.

Još jedna funkcija popisa koja bi mogla biti korisna pri izradi web stranica s Lessom je raspon () funkcija. Uzima tri parametra. Prvi parametar određuje početnu poziciju u rasponu. Drugi parametar označava krajnju poziciju, a posljednji parametar određuje vrijednost povećanja ili smanjenja između svake stavke u rasponu. Ako nije navedena, zadana vrijednost je 1.

div {
 margina: raspon (10px, 40px, 10);
}

Gornji blok koda trebao bi se svesti na sljedeće:

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

Kao što vidite, Less CSS prevodilac počinje od 10px, povećavajući prethodnu vrijednost za 10, dok ne dođe do krajnje pozicije (40px).

Izrada jednostavne web stranice s manje CSS funkcija

Vrijeme je da spojite sve što ste naučili i napravite jednostavan projekt s manje CSS-a. Napravite mapu i dodajte indeks.htm i stil.manje datoteke.

Otvori indeks.htm datoteku i dodajte sljedeći HTML kod.

html>
<htmljezik="en">
<glava>
<metaskup znakova="UTF-8">
<metaIme="viewport"sadržaj="width=device-width, initial-scale=1.0">
<vezarel="list stilova/manje"tip="tekst/css"href="style.less" />
<titula>Dokumenttitula>
glava>
<tijelo>
<divrazreda="kontejner">
<h1>
h1>
div>
<skriptasrc=" https://cdn.jsdelivr.net/npm/less" >skripta>
tijelo>
html>

U gornjem bloku koda nalazi se roditelj "kontejner"div s praznim h1 element. The src atribut na skripta označava put do Less CSS kompilatora.

Bez ovoga skripta oznaku, preglednik neće moći razumjeti vaš kod. Alternativno, možete instalirati Less CSS na svoje računalo putem Node Package Manager (NPM), pokretanjem sljedeće naredbe u terminalu:

npm instalirati -g manje

Kad god ste spremni sastaviti .manje datoteku, jednostavno pokrenite naredbu u nastavku, pazeći da navedete datoteku u koju bi prevodilac trebao napisati izlaz.

manje stil.manje stil.css

u stil.manje datoteku, stvorite dvije varijable, naime: kontejner-širina i kontejner-bg-boja za predstavljanje širine i boje pozadine "kontejner"div odnosno.

@širina-spremnika: 50 rem;
@kontejner-bg-boja: žuta;

Zatim stvorite tri varijable, naime: niz, uzorak, i zamjena. Zatim dodajte stilove za "kontejner"div i h1 element.

@niz: "Pozdrav od djece planete Zemlje!";
@uzorak: "djeca planete Zemlje!";
@zamjena: "stanovnici Plutona!";
.kontejner{
širina: @širina-spremnika;
boja pozadine: @kontejner-bg-boja;
podstava: ako(@širina-spremnika > 30rem, raspon (20 px, 80 px, 20),"");
granica: čvrsta;
}
h1:prvo dijete::nakon{
sadržaj: zamijeniti(@niz,@uzorak,@zamjena);
}

U gornjem bloku koda, raspon () funkcija postavlja podstava vlasništvo na "kontejner"div. Less kompajler bi trebao kompilirati stil.manje datoteku u sljedeće:

.kontejner {
širina: 50rem;
boja pozadine: žuta boja;
podstava: 20px 40px 60px 80px;
granica: čvrsta;
}
h1:prvo dijete::nakon {
sadržaj: "zdravoizthestanovnikaodPluton!";
}

Kada otvorite indeks.htm datoteku u pregledniku, ovo je ono što biste trebali vidjeti:

Poboljšajte svoju produktivnost s CSS predprocesorima

U uobičajenim programskim jezicima, funkcije smanjuju količinu koda koji trebate napisati i minimiziraju pogreške. CSS predprocesori kao što je Less, pružaju nekoliko značajki koje olakšavaju pisanje CSS koda.

CSS predprocesori su korisni pri radu s velikim datotekama. Oni olakšavaju otklanjanje pogrešaka, čime se poboljšava produktivnost programera.