LESS CSS - Príručka pre začiatočníkov
CSS Pre-processor sa stal základom vývoja webových aplikácií. Dodáva sa jednoduchý CSS s programovacími vlastnosťami, ako sú premenné, funkcie alebo mixin, a operácie, ktoré umožňujú vývojárom webu vytvárať modulárne, škálovateľné a zvládnuteľné štýly CSS.
V tomto príspevku sa pozrieme na LESS, ktorý bol jedným z najpopulárnejších pre-procesorov CSS a bol tiež široko nasadený v mnohých front-end rámcoch ako Bootstrap. Budeme tiež prechádzať základné nástroje, nástroje a nastavenia, ktoré vám pomôžu dostať sa do prevádzky pomocou LESS.
Kompilátor
Najprv budeme musieť nastaviť kompilátor. Nižšia syntax je neštandardná podľa špecifikácie W3C. Prehliadač by nebol schopný spracovať a vykresliť výstupy napriek zdedeniu znakov podobných CSS.
Tu je pohľad na kód LESS:
@ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; farba: @ farebná báza;
Prekladač spracuje kód a zapíše LESS syntax do formátu CSS kompatibilného s prehliadačom:
.class1 background-color: # 2d5e8b; .class1 .class2 background-color: #fff; farba: # 2d5e8b;
Existuje niekoľko nástrojov na kompiláciu CSS:
Používanie jazyka JavaScript
LESS prichádza s less.js súbor, ktorý je na vašich webových stránkach veľmi jednoduchý. Vytvorte štýl s .menej rozšírenie a prepojenie v dokumente pomocou rel = "stylesheet / menej" atribút.
Tu môžete získať súbor JS, stiahnuť ho cez správcu balíkov Bower, inak priamo odkazovať na CDN, napríklad:
Všetci ste nastavený a môžete skladať štýly v rámci .menej. Syntax LESS sa zostaví za behu ako stránka načíta. Majte na pamäti, že používanie jazyka JavaScript je odrádzané v štádiu výroby, pretože to bude mať zle vplyv na výkonnosť webových stránok.
Mali by ste vždy zostavovať LESS syntax vopred a len slúžiť pravidelným CSS miesto. Môžeš použiť terminál, Task Runner ako zachrochtání alebo dúšok, alebo grafickú aplikáciu.
Používanie funkcie CLI
LESS poskytuje prirodzené rozhranie príkazového riadka (CLI), lessc, ktorý spracováva niekoľko úloh okrem toho, že len kompiluje syntax LESS. Pomocou CLI môžeme kódovať, komprimovať súbory a vytvoriť zdrojovú mapu. Príkaz je založený na Node.js, ktorý efektívne povoľuje príkaz pracovať v systéme Windows, OS X a Linux.
Uistite sa, že Node.js bol nainštalovaný (inak chytiť inštalačný program tu), potom nainštalujte LESS CLI cez NPM (Node Package Manager) pomocou nasledujúceho príkazového riadku.
npm install -g menej
Teraz máte lessc príkaz k dispozícii na zostavenie LESS na CSS:
lessc style.less style.css
Použitie úloh
Spúšťač úloh je nástroj, ktorý automatizuje vývojové úlohy a pracovné postupy. Skôr ako spustiť lessc príkaz zakaždým, keď chceme zostaviť naše kódy, môžeme nastaviť inštaláciu úlohy a nastaviť ju na sledovanie zmien v rámci našich LESS súborov a okamžite zostaviť LESS na CSS.
Dve obľúbené nástroje v tejto kategórii sú dnes Grunt a Gulp. Máme rad príspevkov, ktoré pokrývajú tieto nástroje. Ak chcete zistiť, ako nasadiť tieto nástroje do svojho pracovného postupu, skontrolujte príspevky.
- Ako používať Grunt na automatizáciu vášho pracovného postupu
- Začíname so službou Gulp.js
- Bitka o vytváranie skriptov: Gulp Vs Grunt
Používanie grafickej aplikácie
Pre tých, ktorí nemusia byť zvyknutí používať Terminál a príkazové riadky, môžu sa rozhodnúť pre grafické rozhranie. Existuje množstvo aplikácií na zostavovanie LESS dnes pre všetky platformy - niektoré zadarmo, niektoré platia
Tu je kompletný zoznam:
| app | Plošina | náklady |
| zmes | OS X / Windows | zadarmo |
| koala | OS X / Windows / Linux | zadarmo |
| Prepros | OS X / Windows | Freemium (USD29) |
| winless | windows | zadarmo |
| CodeKit | OS X | USD32 |
Ktorý kompilátor si vyberiete (okrem JavaScript) naozaj nezáleží, úprimne povedané, pokiaľ nástroj funguje a dopĺňa váš pracovný postup, choďte na to.
Editor kódu
Môžete použiť ľubovoľný editor kódov. Jednoducho nainštalujte plugin alebo rozšírenie, aby ste zdôraznili synergiu LESS s vhodnými farbami, čo je funkcia, ktorá je teraz dostupná pre takmer všetky editory a IDE vrátane SublimeText, Notepad ++, VisualStudio, TextMate a Eclipse..
Teraz, keď máme kompilátor a editor kódov všetko nastavený, môžeme začať písať CSS štýly s LESS syntaxou.
LESS Syntax
Na rozdiel od bežného CSS, ako ho poznáme, LESS pracuje skôr ako programovací jazyk. Je to dynamické, takže očakávať, že nájdeš nejaké terminológie premenné, operácie a Rozsah pozdĺž cesty.
premenné
Po prvé, pozrime sa na premenné.
Ak pracujete s CSS pomerne dlho, pravdepodobne ste napísali niečo také, kde máme v celom šablóne štýlov priradené opakujúce sa hodnoty v blokoch deklarácií.
.class1 background-color: # 2d5e8b; .class2 background-color: #fff; farba: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Táto prax je v skutočnosti v poriadku - kým sa nestane, že sa musíme prebiť viac ako tisíc alebo viac podobných úryvkov v štýle šablóny. To sa môže stať pri budovaní rozsiahleho webu. Práca bude nudná.
Ak používame predprocesor CSS ako LESS, vyššie uvedená inštancia by nebol problém - môžeme ho použiť premenné. Premenné nám umožnia ukladať konštanta ktorá sa neskôr môže použiť v celom šablóne so štýlmi.
@ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; farba: @ farebná báza; .class3 border: 1px solid @ color-base;
V príklade vyššie uložíme farbu # 2d5e8b v @ Farebne báza variabilné. Ak chcete zmeniť farbu, stačí zmeniť hodnotu v tejto premennej.
Okrem farby môžete do premenných umiestniť aj iné hodnoty, ako napríklad:
@ font-family: Gruzínsko @ dot-border: bodkovaný @transition: linear @opacity: 0.5
Mixins
V LESS, môžeme použiť Mixins znovu použiť celé vyhlásenia v pravidle CSS nastavenom v inom množine pravidiel. Tu je príklad:
.gradienty background: #eaeaea; pozadie: lineárny gradient (top, #eaeaea, #cccccc); pozadie: -o-lineárny-gradient (vrchol, #eaeaea, #cccccc); pozadie: -ms-line-gradient (top, #eaeaea, #cccccc); pozadie: -moz-linear-gradient (vrchol, #eaeaea, #cccccc); pozadie: -webkit-linear-gradient (top, #eaeaea, #cccccc);
Vo vyššie uvedenom úryvku máme predvolené predvolené nastavenie stúpanie farba vnútri .prechody trieda. Kedykoľvek chceme pridať gradienty, jednoducho vložíme .prechody tadiaľto:
div .gradients; hranica: 1px masívna # 555; polomer okrajov: 3px;
.box bude zdediť všetky deklarácie blok vnútri .prechody. Takže vyššie uvedené pravidlo CSS sa rovná nasledujúcemu jasnému CSS:
div pozadie: #eaeaea; pozadie: lineárny gradient (top, #eaeaea, #cccccc); pozadie: -o-lineárny-gradient (vrchol, #eaeaea, #cccccc); pozadie: -ms-line-gradient (top, #eaeaea, #cccccc); pozadie: -moz-linear-gradient (vrchol, #eaeaea, #cccccc); pozadie: -webkit-linear-gradient (top, #eaeaea, #cccccc); hranica: 1px masívna # 555; polomer okrajov: 3px;
Okrem toho, ak používate CSS3 veľa na vašich webových stránkach, môžete použiť LESS Elements na uľahčenie práce. LESS Elements je kolekcia spoločných CSS3 Mixins že môžeme často používať v štýloch, ako napríklad border-radius, prechody, Vrhať tieň a tak ďalej.
Ak chcete použiť prvky LESS, jednoducho pridajte @import pravidlo v štýle LESS, ale nezabudnite si ho najskôr prevziať a pridať do pracovného adresára.
@import "elements.less";
Teraz môžeme znovu použiť všetky vyučovanie poskytnuté z elements.less, napríklad pridať 3PX polomer okraja a div, môžeme napísať:
div .rounded (3px);
Ďalšie použitie nájdete v oficiálnej dokumentácii.
Vnorené pravidlá
Keď píšete štýly v obyčajnom CSS, možno ste tiež prešli cez tieto typické štruktúry kódu.
nav výška: 40px; šírka: 100%; pozadie: # 455868; hraničná spodná časť: 2px masívna # 283744; nav li šírka: 600px; výška: 40px; nav li a farba: #fff; line-height: 40px; text-tieň: 1px 1px 0px # 283744;
V zjednodušenom systéme CSS vyberáme podriadené prvky tým, že najskôr zacieľíme na rodičov v každej sade pravidiel, čo je značne nadbytočné, ak budeme sledovať “osvedčené postupy” zásada.
V LESS CSS môžeme pravidlá zjednodušiť pomocou hniezdenie detských prvkov vo vnútri rodičov, nasledovne;
nav výška: 40px; šírka: 100%; pozadie: # 455868; hraničná spodná časť: 2px masívna # 283744; li šírka: 600 pixlov; výška: 40px; a farba: #fff; line-height: 40px; text-tieň: 1px 1px 0px # 283744;
Môžete tiež priradiť pseudo-triedy, Páči sa mi to :vznášať sa, na volič pomocou symbolu ampersand (&).
Povedzme, že chceme pridať :vznášať sa na značku na ukotvenie vyššie, môžeme ju napísať takto:
a farba: #fff; line-height: 40px; text-tieň: 1px 1px 0px # 283744; &: vznášať background-color: # 000; farba: #fff;
operácie
Môžeme tiež vykonávať operácie v LESS, napr doplnenie, odčítanie, násobenie a rozdelenie na čísla, farby a premenné v šablóne so štýlmi.
Povedzme, že chceme, aby prvok B bol dvakrát vyšší ako prvok A. V takom prípade to môžeme napísať takto:
@ výška: 100px. prvok-A výška: @ výška; . prvok-B výška: @ vrchol * 2;
Ako vidíte vyššie, najprv uložíme hodnotu v @height premennej, potom priraďte hodnotu elementu A.
V prvku B skôr než vypočítať výšku sami, môžeme vynásobiť výšku o 2 pomocou operátora hviezdičky (*). Teraz, kedykoľvek zmeníme hodnotu v @height premenlivý, prvok B bude mať vždy dvojnásobok výšky.
Pozrite si pokročilejšie príklady prevádzky v našom predchádzajúcom výučbe: Navrhovanie navigačného panela s hladkou ponukou.
Rozsah
LESS používa Rozsah konceptu, kde premenné budú zdedené najskôr z lokálneho rozsahu a keď nie sú dostupné na miestnej úrovni, prehĺbia sa do širšieho rozsahu.
hlavička @color: čierna; farba pozadia: @color; nav @color: modrá; farba pozadia: @color; a farba: @color;
Vo vyššie uvedenom príklade hlavička má čierna farba pozadia, ale navfarba pozadia bude Modrá pretože má premennú @color vo svojom miestnom rozsahu, zatiaľ čo bude mať tiež modrú, ktorá je zdedená z bližšieho rodiča, nav.
Konečná myšlienka
Nakoniec dúfame, že tento príspevok vám poskytne základné pochopenie o tom, ako lepšie napísať CSS pomocou LESS. Možno sa najprv trochu cíti trochu nepríjemne, ale ako to skúsite častejšie, určite to bude oveľa jednoduchšie.
Tu je niekoľko cvičení, ktoré vám odporúčam, aby ste sa pozreli na ďalšie tipy a praktiky, ktoré môžu pomôcť posunúť svoje zručnosti LESS až na ďalšiu úroveň.
- LESS CSS Tutorial: Navrhovanie navigačnej lišty Slick Menu
- Porozumieť funkcii LESS Fare
- 3 Nové funkcie Menej CSS, ktoré by ste mali vedieť
