Ako používať funkcie v menšom množstve CSS

Less CSS je robustný a dynamický predprocesor CSS, ktorý si v posledných rokoch získal značnú pozornosť a popularitu. Ako predprocesor slúži ako rozšírenie „Vanilla CSS“, tradičného jazyka CSS, používaného na webe. vývoj poskytovaním množstva ďalších funkcií a funkcií, ktoré zlepšujú celkový štýl skúsenosti.

Ak sa dobre vyznáte v písaní štandardných CSS, môžete bez problémov prejsť na používanie Less CSS bez strmej krivky učenia. Táto kompatibilita uľahčuje udržiavanie vašich existujúcich znalostí CSS a zároveň využíva pokročilé možnosti Less.

Čo sú funkcie a prečo sú dôležité?

V programovaní je funkcia blok kódu, ktorý vykonáva konkrétnu úlohu. Môžete ho tiež znova použiť niekde inde v programe. Funkcie zvyčajne prijímajú údaje, spracúvajú ich a vracajú výsledky.

Uľahčujú redukciu duplicitného kódu v programe. Povedzme napríklad, že máte program, ktorý vypočíta zľavu na základe ceny, ktorú používateľ zadá. V jazyk ako JavaScript, môžete to implementovať takto:

funkciuskontrolovaťZľavu(cena, prah){
ak (cena >= prahová hodnota){
nech zľava = 5/100 * cena;
vrátiť„Vaša zľava je $${discount}`;
 } inak {
vrátiť„Ľutujeme, na túto položku sa nevzťahuje zľava. `
 }
}

Potom môžete zavolať funkciu a odovzdať cena a prah.

nech cena = promptná("Zadajte cenu položky: ")
upozornenie (skontrolujte zľavu (cena, 500))

Odstránením logiky kontroly zliav je program nielen čitateľný, ale teraz máte opätovne použiteľný blok kódu, ktorý spracuje zľavu a vráti výsledok. Funkcie dokážu urobiť oveľa viac, ale toto je len základ.

Pochopenie funkcií v menej CSS

V tradičnom CSS máte ako vývojár k dispozícii veľmi obmedzený súbor funkcií. Jednou z najpopulárnejších funkcií v CSS je calc()matematická funkcia ktorý robí presne to, čo sa zdá – vykonáva výpočty a používa výsledok ako hodnotu vlastnosti v CSS.

p{
farba pozadia: červená;
šírka: calc(13px- 4px);
}

V Less CSS existuje niekoľko funkcií, ktoré robia viac ako len aritmetické operácie. Jedna funkcia, s ktorou sa môžete stretnúť v Less, je ak funkciu. The ak funkcia má tri parametre: podmienku a dve hodnoty. Nižšie uvedený blok kódu ukazuje, ako môžete túto funkciu použiť:

@šírka: 10 pixelov;
@výška: 20 pixelov;
div{
marža:ak((@šírka > @výška), 10 pixelov, 20 pixelov)
}

V bloku kódu vyššie kompilátor Less skontroluje, či premenná šírka (definované pomocou @ symbol) je väčší ako premenná výška. Ak je podmienka pravdivá, funkcia vráti prvú hodnotu za podmienkou (10px). V opačnom prípade funkcia vráti druhú hodnotu (20px).

Po kompilácii by výstup CSS mal vyzerať asi takto:

div {
marža: 20px;
}

Ako používať booleovskú hodnotu za menej

Boolean je premenná, ktorá má dve možné hodnoty: pravda alebo falošný. S boolean() Funkcia Less, môžete uložiť hodnotu true alebo false výrazu do premennej pre neskoršie použitie. Tu je návod, ako to funguje.

@text-color: červená;
@bg-color: boolean(@text-color = red);

V bloku kódu vyššie kompilátor Less skontroluje, či farba textu je červená. Potom bg-color premenná ukladá hodnotu.

div{
farba pozadia: ak(@bg-color,zelená, žltá);
}

Vyššie uvedený blok kódu sa skompiluje na niečo takéto:

div {
farba pozadia: zelená;
}

Nahradenie textu v reťazci pomocou funkcie replace().

Syntax pre nahradiť () funkcia vyzera takto:

nahradiť(reťazec, vzor, výmena, vlajky)

reťazec predstavuje reťazec, ktorý chcete vyhľadať a nahradiť. vzor je reťazec, ktorý sa má hľadať. vzor môže byť aj regulárny výraz, ale zvyčajne je to reťazec. Po úspešnej zhode to nahradí kompilátor Less CSS vzor s výmena.

Voliteľne, nahradiť () funkcia môže tiež obsahovať vlajky parameter pre príznaky regulárneho výrazu.

@string: "Ahoj";
@vzor: "ahoj";
@náhrada: "ja";
div::predtým{
obsahu: nahradiť(@string,@vzor,@náhrada)
}

Vyššie uvedený blok kódu by mal po kompilácii viesť k nasledovnému:

div::predtým {
obsahu: "Ahoj";
}

Zoznam funkcií v menej CSS

V Less CSS používate čiarky alebo medzery na definovanie zoznamu hodnôt. Napríklad:

@potraviny: "chlieb", "banán", "zemiak", "mlieko";

Môžete použiť dĺžka () funkcia na vyhodnotenie počtu prvkov v zozname.

@výsledok: dĺžka(@potraviny);

Môžete tiež použiť extrakt() funkcia na extrahovanie hodnoty na konkrétnej pozícii. Napríklad, ak chcete získať tretí prvok v potraviny zoznam, urobíte nasledovné:

@tretí-prvok: extrakt(@potraviny, 3);

Na rozdiel od bežných programovacích jazykov, kde index zoznamu začína od 0, počiatočný index zoznamu v Less CSS je vždy 1.

Ďalšou funkciou zoznamu, ktorá by sa mohla hodiť pri vytváraní webových stránok pomocou funkcie Less, je rozsah() funkciu. Zahŕňa tri parametre. Prvý parameter určuje počiatočnú pozíciu v rozsahu. Druhý parameter označuje koncovú polohu a posledný parameter určuje prírastok alebo znižovanie hodnoty medzi každou položkou v rozsahu. Ak nie je zadaná, predvolená hodnota je 1.

div {
 okraj: rozsah (10px, 40px, 10);
}

Vyššie uvedený blok kódu by sa mal skompilovať do nasledujúceho:

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

Ako vidíte, kompilátor Less CSS začína od 10px, pričom predchádzajúcu hodnotu zvyšuje o 10, až kým nedosiahne koncovú pozíciu (40px).

Vytvorenie jednoduchého webu s menším počtom funkcií CSS

Je čas spojiť všetko, čo ste sa naučili, a vytvoriť jednoduchý projekt s Less CSS. Vytvorte priečinok a pridajte index.htm a štýl.menej súbory.

Otvor index.htm súbor a pridajte nasledujúci HTML kód.

html>
<htmllang="sk">
<hlavu>
<metaznakovú sadu="UTF-8">
<metanázov="výrez"obsahu="width=device-width, initial-scale=1.0">
<odkazrel="štýlov/menej"typu="text/css"href="štýl. menej" />
<titul>Dokumenttitul>
hlavu>
<telo>
<divtrieda="kontajner">
<h1>
h1>
div>
<skriptsrc=" https://cdn.jsdelivr.net/npm/less" >skript>
telo>
html>

V bloku kódu vyššie je rodič "kontajner"div s prázdnou h1 element. The src atribút na skript značka ukazuje na cestu k kompilátoru Less CSS.

Bez tohto skript, prehliadač nebude schopný pochopiť váš kód. Prípadne si môžete do počítača nainštalovať menej CSS pomocou Správca balíkov uzlov (NPM)spustením nasledujúceho príkazu v termináli:

npm inštalácia -g menej

Kedykoľvek ste pripravení zostaviť súbor .menej súbor, jednoducho spustite príkaz uvedený nižšie a uistite sa, že zadávate súbor, do ktorého má kompilátor zapísať výstup.

lessc style.less style.css

V štýl.menej súbor, vytvorte dve premenné, konkrétne: šírka kontajnera a kontajner-bg-farba reprezentovať šírku a farbu pozadia "kontajner"div resp.

@container-width: 50rem;
@container-bg-color: žltá;

Ďalej vytvorte tri premenné, konkrétne: reťazec, vzor, a výmena. Potom pridajte štýly pre "kontajner"div a h1 element.

@string: "Dobrý deň od detí planéty Zem!";
@vzor: "deti planéty Zem!";
@náhrada: "obyvatelia Pluta!";
.kontajner{
šírka: @container-width;
farba pozadia: @container-bg-color;
vypchávka: ak(@container-width > 30rem, rozsah(20 pixelov, 80 pixelov, 20),"");
hranica: pevný;
}
h1:prvorodenec::po{
obsahu: nahradiť(@string,@vzor,@náhrada);
}

Vo vyššie uvedenom bloku kódu je rozsah() funkcia nastavuje vypchávka nehnuteľnosť na "kontajner"div. Kompilátor Less by mal skompilovať súbor štýl.menej súbor do nasledujúceho:

.kontajner {
šírka: 50rem;
farba pozadia: žltá;
vypchávka: 20px 40px 60px 80px;
hranica: pevný;
}
h1:prvorodenec::po {
obsahu: "AhojodnaobyvateľovzPluto!";
}

Keď otvoríte index.htm súbor v prehliadači, toto by ste mali vidieť:

Zlepšite svoju produktivitu pomocou predprocesorov CSS

V bežných programovacích jazykoch funkcie znižujú množstvo kódu, ktorý musíte napísať, a minimalizujú chyby. Predprocesory CSS ako Less poskytujú niekoľko funkcií, ktoré uľahčujú písanie kódu CSS.

CSS preprocesory prídu vhod pri práci s veľkými súbormi. Uľahčujú ladenie problémov, čím zlepšujú produktivitu vývojára.