Co je méně CSS a jak to funguje?
LessJS je předprocesor CSS, nyní se stal základním prvkem ve vývoji webu. Zahrnuje jednoduché CSS s programovacími funkcemi, jako jsou proměnné. ¿Co je LessJS a jak to funguje?
Funkce nebo Mix and Process, které umožňují webovým vývojářům vytvářet modulární styly CSS, škálovatelné a lépe zvládnutelné.
V tomto článku si povíme o LessJS, jednom z nejpopulárnějších generátorů CSS a Bylo také široce implementováno v mnoha front-endových rámcích, jako je Bootstrap.
Projdeme také základní nástrojeNástroje a nastavení, které vám pomohou začít s MÉNĚ.
Co je LessJS a jak to funguje?
Překladač
Nejprve budeme muset nakonfigurovat kompilátor. Podle specifikace W3C není MÉNĚ syntaxe standardní. Skener nebyl schopen zpracovat a vygenerovat výstup, I když zdědí vlastnosti podobné CSS.
Pohled na kód MINUS:
@ base de color: # 2d5e8b;
.class1 {
background-color: @ color-base;
.class2 {
background-color: #fff;
color: @ color-base;
}
} Kompilátor zpracuje kód a převede syntaxi MINUS do formátu CSS kompatibilního s prohlížečem:
.class1 {
background-color: # 2d5e8b;
}
.class1 .class2 {
background-color: #fff;
color: # 2d5e8b;
} Pomocí JavaScriptu
LessJS je dodáván se souborem less.js, který se na váš web opravdu snadno používá. Vytvořte šablonu stylů s příponou.málo a pomocí atributu jej propojte s dokumentem rel = “šablona stylů / minus”.
<link rel = "hoja de estilo / menos" type = "text / css" href = "https://miracomohacerlo.com/que-es-less-css/main.less" />
Soubor JS můžete získat odtud, Stáhněte si jej prostřednictvím správce balíčků Bower, jinak se můžete připojit přímo k CDN.
< link rel = "hoja de estilo / menos" type = "text / css" href = "https://miracomohacerlo.com/que-es-less-css/main.less" /> <script src = "// cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less .min.js "> </script>
Všechny jsou strukturované a mohou v nich vytvářet styly .málo. Během načítání stránky bude syntaxe LessJS kompilována okamžitě.
Upozorňujeme, že použití JavaScriptu ve výrobě se nedoporučuje. protože to vážně ovlivní výkon webových stránek.
Pomocí LessJS CLI
LESS poskytuje nativní rozhraní příkazového řádku (CLI), lessc, které kromě kompilace syntaxe LessJS provádí celou řadu úkolů.
Kódy můžeme odstranit pomocí rozhraní příkazového řádkukomprimovat soubory a generovat mapu zdrojů. Příkaz je založen na Node.js, který umožňuje efektivní spuštění příkazu v systému Windows, OS X a Linux.
npm install -g less
Nyní máte k dispozici příkaz lessc pro kompilaci MÉNĚ v CSS:
lessc style.less style.css
Použijte Task RunnerRunner
Přiřadí nástroj, který automatizuje vývojové úkoly a pracovní postupy. Chceme kompilovat naše kódy místo toho, abychom pokaždé spouštěli příkaz lessc.
Můžeme nainstalovat výkonného pracovníkanakonfigurujte jej tak, aby viděl změny v našich souborech MÉNĚ a okamžitě kompiloval MÉNĚ v CSS.
Používání grafické aplikace
Pro ty, kteří nejsou zvyklí používat terminály a příkazové řádky mohou zvolit grafické rozhraní.
Dnes existuje mnoho aplikací k vytvoření MÉNĚ pro všechny platformy, některé zdarma a některé placené.
Editor kódu
Můžete použít libovolný editor kódu. Chcete-li zvýraznit MÉNĚ syntaxe vhodnými barvami, jednoduše nainstalujte plugin nebo rozšíření.
Funkce je nyní k dispozici téměř všem editorům kódu a IDE, včetně SublimeText, Notepad ++, VisualStudio, TextMate a Eclipse, mezi ostatními.
Syntaxe LessJS
Na rozdíl od běžných CSS, které známe, funguje LessJS spíše jako programovací jazyk. Je to dynamické, takže očekávejte, že najdete terminologii jako Proměnné, Využití a rozsah na silnici.
Proměnné
Podíváme se na proměnné. Pokud pracujete s CSS delší dobu, pravděpodobně jste něco takového zadali, zde máme duplicitní hodnoty přiřazené v deklaračních blocích v celé šabloně stylů.
.class1 {
background-color: # 2d5e8b;
}
.class2 {
background-color: #fff;
color: # 2d5e8b;
}
.class3 {
border: 1px solid # 2d5e8b;
} Tato aplikace je opravdu dobrádokud nebudete nuceni prozkoumat více než tisíc podobných dílů v celé šabloně stylů.
To se může stát při vytváření webu ve velkém měřítku. Pokud nepoužíváme preprocesor CSS, jako je LessJS, bude práce nudná.
Výše uvedený příklad je v pořádku, můžeme použít proměnné. Proměnné nám umožňují ukládat pevnou hodnotu, kterou lze později znovu použít v celé šabloně stylů.
@ base de color: # 2d5e8b;
.class1 {
background-color: @ color-base;
}
.class2 {
background-color: #fff;
color: @ color-base;
}
.class3 {
border: 1px solid @ color-base;
} Ve výše uvedeném příkladu Ukládáme # 2d5e8b v proměnné @ color-base. Pokud chcete změnit barvu, stačí změnit hodnotu v této proměnné.
Kromě barvy můžete do proměnných vložit další hodnoty, například:
@ font-family: Georgia @ dot-border: dotted @transition: linear @opacity: 0.5
