Jak používat funkce v méně CSS

Less CSS je robustní a dynamický preprocesor CSS, který si v posledních letech získal významnou pozornost a popularitu. Jako preprocesor slouží jako rozšíření „Vanilla CSS“, tradičního jazyka pro stylování CSS používaného na webu. vývoj tím, že poskytuje řadu dalších funkcí a funkcí, které zlepšují celkový styl Zkušenosti.

Pokud se dobře vyznáte v psaní standardních CSS, můžete plynule přejít na používání Less CSS bez strmé křivky učení. Tato kompatibilita usnadňuje udržování vašich stávajících znalostí CSS a zároveň využívá pokročilé možnosti Less.

Co jsou funkce a proč jsou důležité?

V programování je funkce blok kódu, který provádí konkrétní úkol. Můžete jej také znovu použít někde jinde v programu. Funkce obvykle přijímají data, zpracovávají je a vracejí výsledky.

Usnadňují snížení duplicitního kódu v programu. Řekněme například, že máte program, který vypočítá slevu na základě ceny, kterou uživatel zadá. V jazyk jako JavaScript, můžete to implementovat takto:

funkcezkontrolovatSlevu(cena, práh){
-li (cena >= limit){
nechat sleva = 5/100 * cena;
vrátit se„Vaše sleva je $${sleva}`;
 } jiný {
vrátit se`Je nám líto, na tuto položku se nevztahuje sleva. `
 }
}

Poté můžete zavolat funkci a předat ji cena a práh.

nechat cena = promptní("Zadejte cenu položky: ")
upozornění (zkontrolujte slevu (cena, 500))

Odstraněním logiky pro kontrolu slev je program nejen čitelný, ale nyní máte znovu použitelný blok kódu, který slevu zpracovává a vrací výsledek. Je toho mnohem víc, co funkce umí, ale toto je jen základ.

Pochopení funkcí v méně CSS

V tradičním CSS máte jako vývojáři k dispozici velmi omezenou sadu funkcí. Jednou z nejoblíbenějších funkcí v CSS je calc()matematická funkce který dělá přesně to, co se zdá – provádí výpočty a používá výsledek jako hodnotu vlastnosti v CSS.

p{
barva pozadí: Červené;
šířka: calc(13px- 4px);
}

V Less CSS existuje několik funkcí, které provádějí více než jen aritmetické operace. Jedna funkce, se kterou se můžete v Less setkat, je -li funkce. The -li funkce má tři parametry: podmínku a dvě hodnoty. Níže uvedený blok kódu ukazuje, jak můžete tuto funkci použít:

@šířka: 10px;
@výška: 20 pixelů;
div{
okraj:li((@šířka > @výška), 10px, 20 pixelů)
}

V bloku kódu výše kompilátor Less zkontroluje, zda je proměnná šířka (definováno pomocí @ symbol) je větší než proměnná výška. Pokud je podmínka pravdivá, funkce vrátí první hodnotu po podmínce (10px). Jinak funkce vrátí druhou hodnotu (20px).

Po kompilaci by měl výstup CSS vypadat nějak takto:

div {
okraj: 20px;
}

Jak používat boolean za méně

Boolean je proměnná, která má dvě možné hodnoty: skutečný nebo Nepravdivé. s boolean() funkce Less, můžete uložit hodnotu true nebo false výrazu do proměnné pro pozdější použití. Zde je návod, jak to funguje.

@barva textu: Červené;
@bg-color: boolean(@text-color = red);

V bloku kódu výše kompilátor Less zkontroluje, zda barva textu je červený. Poté, bg-color proměnná ukládá hodnotu.

div{
barva pozadí: jestli(@bg-color,zelená žlutá);
}

Výše uvedený blok kódu se zkompiluje na něco takového:

div {
barva pozadí: zelená;
}

Nahrazení textu v řetězci pomocí funkce replace().

Syntaxe pro nahradit() funkce vypadá takto:

nahradit(tětiva, vzor, výměna, nahrazení, vlajky)

tětiva představuje řetězec, který chcete vyhledat a nahradit. vzor je řetězec, který se má hledat. vzor může být také regulární výraz, ale obvykle je to řetězec. Po úspěšné shodě to nahradí kompilátor Less CSS vzor s výměna, nahrazení.

Volitelně, nahradit() funkce může také obsahovat vlajky parametr pro příznaky regulárního výrazu.

@tětiva: "Ahoj";
@vzor: "ahoj";
@výměna, nahrazení: "já";
div::před{
obsah: nahradit(@tětiva,@vzor,@výměna, nahrazení)
}

Výše uvedený blok kódu by měl po kompilaci vést k následujícímu:

div::před {
obsah: "Ahoj";
}

Seznam funkcí v méně CSS

V Less CSS používáte k definování seznamu hodnot čárky nebo mezery. Například:

@koloniál: "chléb", "banán", "brambor", "mléko";

Můžete použít délka() funkce pro vyhodnocení počtu prvků v seznamu.

@výsledek: délka(@potraviny);

Můžete také použít výpis() funkce pro extrakci hodnoty na konkrétní pozici. Například, pokud chcete získat třetí prvek v koloniál seznamu, provedete následující:

@třetí-prvek: extrakt(@potraviny, 3);

Na rozdíl od běžných programovacích jazyků, kde index seznamu začíná od 0, je počáteční index seznamu v Less CSS vždy 1.

Další funkcí seznamu, která by se mohla hodit při vytváření webových stránek s Less, je rozsah() funkce. Zabírá tři parametry. První parametr určuje počáteční pozici v rozsahu. Druhý parametr udává koncovou polohu a poslední parametr udává přírůstek nebo úbytek mezi každou položkou v rozsahu. Pokud není zadána, výchozí hodnota je 1.

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

Výše uvedený blok kódu by se měl zkompilovat na následující:

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

Jak můžete vidět, kompilátor Less CSS začíná na 10px a zvyšuje předchozí hodnotu o 10, dokud nedosáhne koncové pozice (40px).

Vytvoření jednoduchého webu s menším počtem funkcí CSS

Je čas spojit vše, co jste se naučili, a vytvořit jednoduchý projekt s Less CSS. Vytvořte složku a přidejte index.htm a styl.méně soubory.

Otevři index.htm a přidejte následující HTML kód.

html>
<htmllang="en">
<hlava>
<metaznaková sada="UTF-8">
<metanázev="výřez"obsah="width=device-width, initial-scale=1.0">
<odkazrel="stylesheet/less"typ="text/css"href="style.less" />
<titul>Dokumenttitul>
hlava>
<tělo>
<divtřída="kontejner">
<h1>
h1>
div>
<skriptsrc=" https://cdn.jsdelivr.net/npm/less" >skript>
tělo>
html>

V bloku kódu výše je rodič "kontejner"div s prázdnou h1 živel. The src atribut na skript značka ukazuje na cestu k kompilátoru Less CSS.

Bez tohoto skript, prohlížeč nebude schopen porozumět vašemu kódu. Případně můžete do počítače nainstalovat méně CSS pomocí Správce balíčků uzlů (NPM), spuštěním následujícího příkazu v terminálu:

npm install -g less

Kdykoli jste připraveni zkompilovat soubor .méně soubor, jednoduše spusťte níže uvedený příkaz a ujistěte se, že zadáváte soubor, do kterého má kompilátor zapsat výstup.

lessc style.less style.css

V styl.méně soubor, vytvořte dvě proměnné, a to: šířka kontejneru a kontejner-bg-barva reprezentovat šířku a barvu pozadí "kontejner"div respektive.

@šířka-kontejneru: 50rem;
@container-bg-color: žlutá;

Dále vytvořte tři proměnné, a to: tětiva, vzor, a výměna, nahrazení. Poté přidejte styly pro "kontejner"div a h1 živel.

@tětiva: "Zdravím děti planety Země!";
@vzor: "děti planety Země!";
@výměna, nahrazení: "obyvatelé Pluta!";
.kontejner{
šířka: @šířka-kontejneru;
barva pozadí: @container-bg-color;
vycpávka: -li(@šířka-kontejneru > 30rem, rozsah(20 pixelů, 80 pixelů, 20),"");
okraj: pevný;
}
h1:první dítě::po{
obsah: nahradit(@tětiva,@vzor,@výměna, nahrazení);
}

Ve výše uvedeném bloku kódu je rozsah() funkce nastavuje vycpávka nemovitost na "kontejner"div. Kompilátor Less by měl zkompilovat soubor styl.méně soubor do následujícího:

.kontejner {
šířka: 50rem;
barva pozadí: žlutá;
vycpávka: 20px 40px 60px 80px;
okraj: pevný;
}
h1:první dítě::po {
obsah: "AhojzaobyvatelzPluto!";
}

Když otevřete index.htm soubor v prohlížeči, měli byste vidět toto:

Zvyšte svou produktivitu pomocí CSS preprocesorů

V běžných programovacích jazycích funkce snižují množství kódu, který potřebujete napsat, a minimalizují chyby. CSS preprocesory, jako je Less, poskytují několik funkcí, které usnadňují psaní kódu CSS.

CSS preprocesory přijdou vhod při práci s velkými soubory. Usnadňují ladění problémů, čímž zvyšují produktivitu vývojáře.