LESS CSS - Příručka pro začátečníky
CSS Pre-procesor se nyní stal základem vývoje webu. Dodává prostý CSS s programovacími vlastnostmi jako jsou Proměnné, Funkce nebo Mixin a Operace, které umožňují vývojářům webu vytvářet modulární, škálovatelné a zvládnutelnější styly CSS.
V tomto příspěvku se podíváme na LESS, který je jedním z nejpopulárnějších CSS Pre-procesorů v okolí, a byl také široce nasazen v řadě front-end frameworků, jako je Bootstrap. Budeme také procházet základní nástroje, nástroje a nastavení, které vám pomohou dostat se nahoru a pracovat s programem LESS.
Kompilátor
Pro začátek budeme muset nastavit překladač. Syntaxe LESS je nestandardní, podle specifikace W3C. Prohlížeč by nebyl schopen zpracovat a vykreslit výstup, navzdory zděděným vlastnostem podobným CSS.
Zde je pohled na kód LESS:
@ barevný základ: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; barva: @ barevná základna;
Kompilátor zpracuje kód a změní syntaxi LESS do formátu CSS kompatibilního s prohlížečem:
.class1 background-color: # 2d5e8b; .class1 .class2 background-color: #fff; barva: # 2d5e8b;
Existuje několik nástrojů pro kompilaci CSS:
Použití JavaScriptu
LESS přichází s less.js soubor, který je opravdu snadno nasaditelný na vašich webových stránkách. Vytvořte šablonu stylů .méně rozšíření a propojit jej ve vašem dokumentu pomocí rel = "stylesheet / less" atribut.
Soubor JS můžete získat zde, stáhnout prostřednictvím Správce balíčků Bower, jinak přímo odkazovat na CDN:
Všichni jste nastaveni a můžete skládat styly uvnitř .méně. Syntaxe LESS bude kompilována za běhu jako stránka načítá. Mějte na paměti, že používání JavaScriptu je ve fázi výroby odrazováno, protože to bude mít nepříznivý vliv na výkon webových stránek.
Syntaxi LESS byste měli vždy kompilovat předem a pouze předem slouží pravidelným CSS místo toho. Můžeš použít Terminál, úkol Runner jako Grunt nebo Doušek, nebo grafickou aplikaci.
Použití CLI
LESS poskytuje nativní rozhraní příkazového řádku (CLI), lessc, , který zpracovává několik úkolů, které překračují pouze kompilaci syntaxe LESS. Pomocí CLI můžeme tyto kódy kódovat, komprimovat soubory a vytvořit zdrojovou mapu. Příkaz je založen na systému Node.js, který efektivně umožňuje, aby příkaz pracoval v systému Windows, OS X a Linuxu.
Ujistěte se, že byl nainstalován Node.js (jinak zde instalátor instalujte) a poté pomocí následujícího příkazového řádku nainstalujte LESS CLI přes NPM (Node Package Manager).
npm nainstalovat -g méně
Teď máš lessc k dispozici ke kompilaci LESS do CSS:
lessc style.less style.css
Pomocí Runner úlohy
Běžec úloh je nástroj, který automatizuje vývojové úlohy a pracovní postupy. Spíše než spustit lessc příkaz pokaždé, když bychom chtěli zkompilovat naše kódy, můžeme nainstalovat běžce úloh a nastavit, aby sledoval změny v našich souborech LESS a okamžitě zkompiloval LESS do CSS.
Dva populární nástroje v této kategorii dnes jsou Grunt a Gulp. Máme řadu příspěvků, které pokrývají tyto nástroje. Chcete-li se dozvědět, jak tyto nástroje použít ve svém pracovním postupu, podívejte se na příspěvky.
- Jak používat Grunt pro automatizaci vašeho pracovního postupu
- Začínáme s Gulp.js
- Bitva o stavbu skriptů: Gulp Vs Grunt
Použití grafické aplikace
Pro ty, kteří by nebyli zvyklí používat terminál a příkazové řádky, mohou místo toho zvolit grafické rozhraní. Existuje spousta aplikací pro kompilaci LESS dnes pro všechny platformy - některé zdarma, některé placené
Zde je úplný seznam:
| Aplikace | Plošina | Náklady |
| Směs | OS X / Windows | Volný, uvolnit |
| Koala | OS X / Windows / Linux | Volný, uvolnit |
| Prepros | OS X / Windows | Freemium (USD29) |
| WinLESS | Okna | Volný, uvolnit |
| CodeKit | OS X | USD32 |
Který kompilátor si zvolíte (kromě JavaScriptu) na tom nezáleží, upřímně, pokud nástroj funguje a doplňuje váš pracovní postup, jděte na to.
Editor kódu
Můžete použít libovolný editor kódu. Stačí nainstalovat plugin nebo rozšíření, které zvýrazní LESS syntaxi se správnými barvami, což je funkce, která je nyní k dispozici téměř pro všechny editory kódu a IDE, včetně SublimeText, Notepad ++, VisualStudio, TextMate a Eclipse..
Nyní, když máme nastavený překladač a editor kódů, můžeme začít psát styly CSS se syntaxí LESS.
LESS Syntaxe
Na rozdíl od běžných CSS, jak ji známe, pracuje LESS mnohem více jako programovací jazyk. Je to dynamické, takže očekávejte, že najdete nějaké terminologie Proměnné, Úkon a Rozsah při cestě.
Proměnné
Nejprve se podívejme na Proměnné.
Pokud jste pracovali docela dlouho s CSS, pravděpodobně jste něco takového napsali, kde máme opakované hodnoty přiřazené v deklaračních blocích v celé šabloně stylů..
.class1 background-color: # 2d5e8b; .class2 background-color: #fff; barva: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Tato praxe je vlastně v pořádku - až se ocitneme, že nebudeme muset prosít více než tisíc nebo více podobných úryvků celé šablony stylů. To by mohlo nastat při budování rozsáhlé webové stránky. Práce bude nudná.
Pokud používáme CSS pre-procesor jako LESS, výše uvedená instance by nebyla problém - můžeme použít Proměnné. Proměnné nám umožní ukládat konstantní hodnotu, kterou lze později použít v celé šabloně stylů.
@ barevný základ: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; barva: @ barevná základna; .class3 border: 1px solid @ color-base;
Ve výše uvedeném příkladu uložíme barvu # 2d5e8b v @ barevný základ proměnná. Pokud chcete změnit barvu, musíme pouze změnit hodnotu v této proměnné.
Kromě barev můžete do proměnných umístit i jiné hodnoty, například:
@ font-family: Georgia @ dot-border: tečkovaný @ přechod: lineární @ kapacita: 0,5
Směsi
V LESS můžeme použít Směsi opakované použití celých deklarací v pravidle CSS nastaveném v jiné sadě pravidel. Zde je příklad:
.přechody pozadí: #eaeaea; pozadí: lineární gradient (top, #eaeaea, #cccccc); pozadí: -o-lineární gradient (top, #eaeaea, #cccccc); pozadí: -ms-lineární gradient (top, #eaeaea, #cccccc); pozadí: -moz-lineární gradient (top, #eaeaea, #cccccc); pozadí: -webkit-lineární gradient (top, #eaeaea, #cccccc);
Ve výše uvedeném úryvku jsme přednastavili výchozí nastavení spád barva uvnitř .přechody třída. Kdykoliv chceme přidat gradienty jednoduše vložíme .přechody tudy:
div .gradients; ohraničení: 1px pevné # 555; hraniční rádius: 3px;
.box zdědí všechny deklarační bloky uvnitř .přechody. Pravidlo CSS výše je tedy rovno následujícím prostým CSS:
div pozadí: #eaeaea; pozadí: lineární gradient (top, #eaeaea, #cccccc); pozadí: -o-lineární gradient (top, #eaeaea, #cccccc); pozadí: -ms-lineární gradient (top, #eaeaea, #cccccc); pozadí: -moz-lineární gradient (top, #eaeaea, #cccccc); pozadí: -webkit-lineární gradient (top, #eaeaea, #cccccc); ohraničení: 1px pevné # 555; hraniční rádius: 3px;
Kromě toho, pokud používáte CSS3 hodně na svých webových stránkách, můžete použít LESS Elements, aby vaše práce mnohem jednodušší. LESS Elements je sbírka společných CSS3 Mixiny které můžeme často používat ve vzorcích, jako je např poloměr ohraničení, přechody, vrhat stín a tak dále.
Chcete-li použít prvky LESS, jednoduše přidejte @import pravidlo ve vašem LESS stylu, ale nezapomeňte si jej nejprve stáhnout a přidat do svého pracovního adresáře.
@import "elements.less";
Nyní můžeme znovu použít všechny třídy poskytovány elements.less, například přidat 3px poloměr okraje k a div, můžeme psát:
div .rounded (3px);
Další použití naleznete v oficiální dokumentaci.
Vnořená pravidla
Když píšete styly v prostém CSS, můžete také projít tyto typické struktury kódů.
nav výška: 40px; šířka: 100%; pozadí: # 455868; hraniční dno: 2px pevné # 283744; nav li width: 600px; výška: 40px; nav li a color: #fff; line-height: 40px; textový stín: 1px 1px 0px # 283744;
V prostém CSS vybereme podřízené elementy tím, že nejprve zacílíme na rodiče v každé sadě pravidel, což je značně redundantní, pokud se řídíme “osvědčené postupy” zásada.
V LESS CSS můžeme zjednodušit pravidla hnízdí dětské prvky uvnitř rodičů, jak následuje;
nav výška: 40px; šířka: 100%; pozadí: # 455868; hraniční dno: 2px pevné # 283744; li width: 600px; výška: 40px; a color: #fff; line-height: 40px; textový stín: 1px 1px 0px # 283744;
Můžete také přiřadit pseudo-třídy, jako :vznášet se, pomocí voliče ampersand (&).
Řekněme, že chceme přidat :vznášet se na kotevní značku výše, můžeme to napsat takto:
a color: #fff; line-height: 40px; textový stín: 1px 1px 0px # 283744; &: hover background-color: # 000; barva: #ff;
Úkon
Můžeme také provádět operace v LESS, jako např sčítání, odčítání, násobení a dělení na čísla, barvy a proměnné v šabloně stylů.
Řekněme, že chceme, aby prvek B byl dvakrát vyšší než prvek A. V tom případě to můžeme napsat takto:
@Výška: 100px .element-A height: @height; .element-B height: @ight * 2;
Jak vidíte nahoře, hodnotu nejprve uložíme do @výška proměnnou, pak přiřaďte hodnotu prvku A.
V elementu B místo výpočtu výšky sami, můžeme násobit výšku o 2 pomocí hvězdičky (*). Nyní, kdykoliv změníme hodnotu v @výška proměnná, prvek B bude mít vždy dvojnásobnou výšku.
Podívejte se na další pokročilé příklady provozu v našem předchozím výukovém programu: Design Slick Menu Navigation Bar.
Rozsah
LESS platí Rozsah kde proměnné budou zděděny nejprve z lokálního rozsahu, a pokud není lokálně k dispozici, bude vyhledávat v širším rozsahu.
header @color: black; barva pozadí: @color; nav @color: blue; barva pozadí: @color; a color: @color;
Ve výše uvedeném příkladu záhlaví má Černá barva pozadí, ale navBarva pozadí bude modrý má proměnnou @color ve svém lokálním rozsahu, zatímco A bude mít také modrou, která je zděděna od svého bližšího rodiče, nav.
Závěrečná myšlenka
Doufáme, že tento příspěvek vám dá základní představu o tom, jak můžeme pomocí LESS psát CSS lépe. Možná se zpočátku cítíte trochu trapně, ale jak to zkusíte častěji, bude to jistě mnohem snazší.
Zde je několik tutoriálů, které vás vyzývám, abyste se podívali na další tipy a postupy, které vám pomohou posunout vaši dovednost LESS na další úroveň..
- LESS CSS Tutoriál: Návrh navigačního panelu Slick Menu
- Vysvětlení funkcí LESS Color
- 3 Nové funkce LESS CSS, které byste měli vědět
