Méně CSS může usnadnit používání jazyka pomocí zkratek syntaxe a výkonných funkcí. Objevte, co pro vás může udělat Less.
Pokud jste zkušený vývojář CSS, budete si dobře vědomi nedostatků jazyka. Stále postrádá širokou podporu pro dlouho požadované funkce, jako je vnoření a mixiny.
Less (Leaner Style Sheets) je rozšíření CSS s mnoha výkonnými funkcemi. Pokud znáte CSS, pak je učení Less snadné, protože syntaxe Lesse je velmi podobná.
Jak instalovat méně
Můžete nainstalovat Less s Správce balíčků JavaScript, NPM spuštěním:
npm install less -g
Po instalaci můžete kompilovat .méně soubory do .css za použití méněc příkaz. Například následující příkaz se zkompiluje styl.méně a výstupy výsledků v a styl.css soubor.
lessc style.less style.css
Proměnné v méně
Na rozdíl od běžné CSS, které používá operátor "--" k definování proměnných, Less definuje proměnné pomocí symbolu "@". Například:
@šířka:40 pixelů;
@výška:80 pixelů;
Blok kódu jednoduše vytvoří dvě proměnné, šířku a výšku, které obsahují dvě hodnoty: 40px a 80px. Běžnou praxí je převzít běžně používané hodnoty v CSS a uložit je do proměnné. To usnadňuje úpravu těchto hodnot, protože existuje pouze jeden zdroj kontroly.
Zde je návod, jak můžete použít proměnné v Less. Vytvořit index.htm soubor a přidejte následující standardní kód:
html>
<htmllang="en">
<hlava>
<metaznaková sada="UTF-8">
<metahttp-ekviv="X-UA-kompatibilní"obsah="IE=hrana">
<metanázev="výřez"obsah="width=device-width, initial-scale=1.0">
<odkazrel="stylesheet"href="style.css">
<titul>Použití méně CSStitul>
hlava>
<tělo>
<div>
Zdravím děti planety Země!
div>
tělo>
html>
Dále vytvořte a styl.méně soubor a přidejte následující:
@šířka:400 pixelů;
@výška:400 pixelů;
@vertical-center: centrum;
@txt-bílá: bílý;
@bg-red: rgb(220, 11, 11);
@font-40:40 pixelů;
div {
šířka: @šířka;
výška: @výška;
Zobrazit: flex;
barva: @txt-bílá;
barva pozadí: @bg-red;
velikost písma: @font-40;
}
Nyní, když můžete zkompilovat .méně soubor do .css za použití méněc příkaz:
lessc style.less style.css
Zkompilovaný CSS by měl vypadat takto:
div {
šířka: 400px;
výška: 400px;
Zobrazit: flex;
barva: bílý;
barva pozadí: #dc0b0b;
velikost písma: 40px;
}
Když otevřete prohlížeč, měli byste vidět toto:
S proměnnými v Less můžete dělat mnohem víc, jako je interpolace, která vám umožňuje používat proměnné jako názvy selektorů, adresy URL a další. Zde je příklad, jak implementovat proměnnou interpolaci:
@custom-selector: kontejner;
.@{custom-selector} {
vycpávka: 10px;
okraj: 10px;
okraj: pevný 10px;
}
Výše uvedený blok kódu používá @{...} klauzule k použití proměnné jako selektoru. Po kompilaci bude kód mít následující výsledek:
.kontejner{
vycpávka: 10px;
okraj: 10px;
okraj: pevný 10px;
}
Aritmetické operace za méně
Less také poskytuje podporu pro aritmetické operace, jako je sčítání, odčítání, dělení a násobení. Tyto operace pracují s konstantami, hodnotami a proměnnými.
@proměnná-1:5px;// Násobení Operace mezi proměnnou a konstantou
@proměnná-2:@proměnná-1 * 2
// Operace sčítání mezi hodnotou a proměnnou.
@proměnná-3:10px + @proměnná-2
Jak používat Mixins
Mixins vám umožňuje znovu použít styly (nebo kód CSS) v celé šabloně stylů. jiný Rozšíření CSS jako Sass nabízí také Mixiny. Chcete-li ilustrovat, jak mixiny fungují v Less, vytvořte index.htm a přidejte následující kód:
html>
<htmllang="en">
<hlava>
<metaznaková sada="UTF-8">
<metahttp-ekviv="X-UA-kompatibilní"obsah="IE=hrana">
<metanázev="výřez"obsah="width=device-width, initial-scale=1.0">
<odkazrel="stylesheet"href="style.css">
<titul>Použití méně CSStitul>
hlava>
<tělo>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elita. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, expectnda reiciendis
facilis unde sequi.
div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elita. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, expectnda reiciendis
facilis unde sequi.
p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elita. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, expectnda reiciendis
facilis unde sequi.
p>
tělo>
html>
Dále vytvořte a styl.méně soubor a přidejte následující řádky:
.ukázka-textu() {
barva pozadí: žlutá;
}.první dopis() {
barva pozadí: Červené;
barva: bílá;
velikost písma: 30 pixelů;
}p {
.ukázka-textu();
}
p::první dopis {
.první dopis();
}
V bloku kódu výše jsou dvě třídy mixin: .ukázka-textu a .první dopis. Pokud chcete použít mixin v jiné části šablony stylů, jednoduše na něj odkazujte jménem se závorkami na konci: .mixin(). V prohlížeči byste měli vidět něco takového:
Stylové hnízdění za méně
Řekněme, že máte nadřazený prvek div se dvěma prvky jako jeho potomky: a p prvek a další div. Obvykle, pokud chcete stylizovat p prvek s červenou barvou a div prvky se zelenou barvou, můžete použít následující přístup:
divp {
barva: Červené;
}
div {
barva: zelená
}
Less poskytuje podobnou funkci prostřednictvím použití hnízdění. Takže v tomto případě by menší ekvivalent výše uvedeného bloku kódu byl:
div {
barva: zelená;
p {
barva: Červené;
}
}
Nejen, že je snazší si to omotat hlavou, ale kód je také lépe udržovatelný. Odkazování na rodičovské selektory s méně je snazší s & operátor. Například:
knoflík {
barva pozadí: modrá;
okraj: žádný;
&:vznášet se {
barva pozadí: Šedá;
přeměnit: měřítko(1.2);
}
}
Výše uvedený blok kódu bude mít po kompilaci za následek následující kód CSS:
knoflík {
barva pozadí: modrý;
okraj: žádný;
}
knoflík:vznášet se {
barva pozadí: Šedá;
přeměnit: měřítko(1.2);
}
Méně pochopení rozsahu a funkcí
Stejně jako běžné programovací jazyky mají proměnné rozsah bloku, ve kterém je definujete. Pro ilustraci vytvořte nový index.htm a přidejte první standardní kód HTML poskytnutý dříve. Poté přidejte následující blok do tělo štítek:
<divtřída="vnější div">
Outer Div by měl být červený.
<br />
<rozpětítřída="vnitřní div">
Vnitřní část by měla být zelená.
rozpětí>
div>
V styl.méně soubor, přidejte následující řádky:
@bg-color: Červené;tělo {
velikost písma: 40 pixelů;
barva: bílá;
okraj: 20 pixelů;
}.vnitřní-div {
@bg-color: zelená;
barva pozadí: @bg-color;
}
.vnější-div {
barva pozadí: @bg-color;
}
The vnitřní-div blok předefinuje bg-color proměnná s rozsahem právě na tento blok. Takže zelená barva platí pouze pro tuto třídu a neovlivňuje globální bg-color variabilní. Když zkompilujete a otevřete výsledek v prohlížeči, měli byste vidět toto:
Méně také poskytuje užitečné funkce, které mohou být v některých scénářích užitečné. Pokud například chcete nastavit styl pouze v případě, že je splněna určitá podmínka, můžete to provést pomocí -li funkce. Tato funkce má následující syntaxi:
-li((podmínka), hodnota1, hodnota2)
Kód se vrátí hodnota1 pokud je podmínka splněna a hodnota2 v opačném případě. Zde je příklad:
@var1:20 pixelů;
@var2:20 pixelů;
div {
vycpávka: jestli((@var1 = @var2), 10px, 20 pixelů);
}
Výše uvedený blok kódu by měl po kompilaci vést k následujícímu CSS:
div {
vycpávka: 10px;
}Udělejte více s méně a dalšími rozšířeními CSS
Tisíce vývojářů používají Less, aby bylo psaní CSS trochu příjemné. Úžasné funkce, jako jsou funkce, mixiny a proměnné, jsou jen malou částí toho, co Less nabízí.
Méně je vhodné pro malé i velké projekty. Stojí za zmínku, že další stejně úžasné jazyky rozšíření CSS, jako je Sass a Stylus CSS, stojí za to vyzkoušet.