MANJ CSS - Začetniški priročnik
Pre-procesor CSS je zdaj postal glavni vir za razvoj spletnih strani. Pošilja navaden CSS s programskimi lastnostmi, kot so spremenljivke, funkcije ali mixin, in operacije, ki omogočajo izdelavo spletnih razvijalcev modularni, prilagodljivi in bolj obvladljivi slogi CSS.
V tem prispevku bomo preučevali LESS, ki je bil eden izmed najbolj priljubljenih predprocesorjev CSS in je bil široko uporabljen v številnih prednjih okvirih, kot je Bootstrap. Prav tako bomo hodili skozi osnovni pripomočki, orodja in nastavitve, ki vam bodo pomagali pri aktiviranju z LESS.
Prevajalnik
Za začetek bomo morali namestiti prevajalnik. Sintaksa LESS je nestandardna po specifikaciji W3C. Brskalnik ne bo mogel obdelati in upodobiti rezultatov, kljub naslednjim lastnostim, podobnim CSS.
Tu je pogled na kodo LESS:
@ barvna osnova: # 2d5e8b; .class1 background-color: @ color-base; .class2 ozadje-barva: #fff; barva: @ barvna osnova;
Prevajalnik bo obdelal kodo in sintakso LESS pretvoril v CSS format, skladen s brskalnikom:
.class1 ozadje-barva: # 2d5e8b; .class1 .class2 ozadje-barva: #fff; barva: # 2d5e8b;
Obstajajo številna orodja za prevajanje CSS:
Uporaba JavaScripta
LESS prihaja z a less.js datoteko, ki je zelo preprosta za uporabo na vašem spletnem mestu. Ustvarite slog s slogi .manj in ga povežite v dokument z uporabo rel = "stylesheet / less" atribut.
Datoteko JS lahko dobite tukaj, jo prenesete prek upravitelja paketov Bower, sicer pa neposredno na CDN.
Vsi ste nastavljeni in lahko sestavite sloge znotraj .manj. Sintaksa LESS se bo prenašala med nalaganjem strani. Ne pozabite, da uporaba JavaScripta se v fazi produkcije ne priporoča, saj bo to slabo vplivalo na delovanje spletnega mesta.
Sintakso LESS morate vedno sestaviti samo in prej strežnik redni CSS namesto tega. Lahko uporabiš Terminal, Task Runner Grunt ali Gulp, ali grafično aplikacijo za to.
Uporaba CLI
LESS zagotavlja izvorni vmesnik ukazne vrstice (CLI), lessc, ki obravnava več nalog, ki presegajo samo sintakso LESS. Z uporabo CLI lahko vstavimo kode, komprimiramo datoteke in ustvarimo izvorno karto. Ukaz temelji na Node.js, ki učinkovitemu ukazu omogoča, da deluje v operacijskih sistemih Windows, OS X in Linux.
Prepričajte se, da je nameščen Node.js (sicer zagrabite namestitveni program tukaj), nato namestite LESS CLI prek NPM (upravljalnik paketov vozlišč) z naslednjo ukazno vrstico:.
npm namestite -g manj
Zdaj imate lessc ukazu, ki vam je na voljo, da zberete LESS v CSS:
lessc style.less style.css
Uporaba tekača opravil
Task runner je orodje, ki avtomatizira razvojne naloge in delovne procese. Namesto vodenja lessc ukaz vsakič, ko bi radi sestavili naše kode, lahko namestimo namestitvenega tekača in ga nastavimo tako, da spremlja spremembe znotraj naših LESS datotek, in jih takoj zbere v CSS.
Dva priljubljena orodja v tej kategoriji sta Grunt in Gulp. Imamo vrsto objav, ki pokrivajo ta orodja. Preverite objave, če želite izvedeti, kako uvesti ta orodja v delovni tok.
- Kako uporabljati Grunt za avtomatizacijo vašega delovnega toka
- Kako začeti z Gulp.js
- Bitka za gradnjo skript: Gulp Vs Grunt
Uporaba grafične aplikacije
Za tiste, ki morda niso navajeni uporabljati terminala in ukazne vrstice, se lahko odločijo za grafični vmesnik. Obstaja veliko aplikacij za sestavo LESS danes za vse platforme - nekatere brezplačne, nekatere plačane
Tu je celoten seznam:
| App | Platforma | Stroški |
| Mešanica | OS X / Windows | prost |
| Koala | OS X / Windows / Linux | prost |
| Prepros | OS X / Windows | Freemium (29 USD) |
| BREZPLAČNO | Windows | prost |
| CodeKit | OS X | USD32 |
Kateri prevajalnik, za katerega ste se odločili (razen JavaScripta), pravzaprav ni pomemben, dokler orodje deluje in dopolnjuje vaš potek dela,.
Urejevalnik kode
Uporabite lahko katerikoli urejevalnik kod. Preprosto namestite vtičnik ali razširitev, da označite skladnjo LESS z ustreznimi barvami, kar je funkcija, ki je zdaj na voljo za skoraj vse urejevalnike kode in IDE-je, vključno s SublimeText, Notepad ++, VisualStudio, TextMate in Eclipse..
Zdaj, ko imamo vse prevajalnik in urejevalnik kod, lahko začnemo pisati CSS stile s sintakso LESS.
Manjša sintaksa
Za razliko od običajnega CSS-ja, kot ga poznamo, LESS deluje bolj kot programski jezik. To je dinamično, zato pričakujte, da boste našli nekaj terminologij, kot je Spremenljivke, Operacija in Področje uporabe spotoma.
Spremenljivke
Najprej si poglejmo Spremenljivke.
Če ste delali kar nekaj časa s CSS-jem, ste verjetno napisali nekaj takega, kjer imamo ponavljajoče se vrednosti, podeljene v blokih deklaracij v celotni slogi slogov..
.class1 ozadje-barva: # 2d5e8b; .class2 background-color: #fff; barva: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Ta praksa je pravzaprav v redu - dokler se ne znajdemo v preseganju več kot tisoč ali več podobnih odrezkov na celotnem slogovnem listu. To se lahko zgodi pri izgradnji obsežne spletne strani. Delo bo postalo dolgočasno.
Če uporabljamo predprocesor CSS, kot je LESS, zgornji primer ne bi bil problem - lahko ga uporabimo Spremenljivke. Spremenljivke nam omogočajo shranjevanje konstanto vrednost, ki jo lahko kasneje ponovno uporabite v celotni listi slogov.
@ barvna osnova: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; barva: @ barvna osnova; .class3 border: 1px solid @ color-base;
V zgornjem primeru shranimo barvo # 2d5e8b v @ barvna osnova spremenljivko. Ko želite spremeniti barvo, moramo le spremeniti vrednost v tej spremenljivki.
Poleg barv lahko v spremenljivke vnesete tudi druge vrednosti, na primer:
@ font-family: Georgia @ dot-border: pikčasto @ prehod: linearno @opacity: 0,5
Mixins
V MANJŠEM lahko uporabimo Mixins za ponovno uporabo celotnih izjav v pravilu CSS, ki je nastavljen v drugem nizu pravil. Tukaj je primer:
.gradienti ozadje: #eaeaea; ozadje: linearni gradient (top, #eaeaea, #cccccc); ozadje: -o-linearni gradient (top, #eaeaea, #cccccc); ozadje: -ms-linearni gradient (top, #eaeaea, #cccccc); ozadje: -moz-linear-gradient (top, #eaeaea, #cccccc); ozadje: -webkit-linear-gradient (top, #eaeaea, #cccccc);
V zgornjem odrezku smo prednastavili privzeto nastavitev gradient barva znotraj. \ t .nakloni razred. Kadarkoli želimo dodati prelome, preprosto vstavimo .nakloni Na ta način:
div .gradients; obroba: 1px solid # 555; obrobni polmer: 3px;
The .škatla bo podedoval vse bloke izjav v notranjosti .nakloni. Pravilo CSS je torej enako naslednjemu navadnemu CSS:
div ozadje: #eaeaea; ozadje: linearni gradient (top, #eaeaea, #cccccc); ozadje: -o-linearni gradient (top, #eaeaea, #cccccc); ozadje: -ms-linearni gradient (top, #eaeaea, #cccccc); ozadje: -moz-linear-gradient (top, #eaeaea, #cccccc); ozadje: -webkit-linear-gradient (top, #eaeaea, #cccccc); obroba: 1px solid # 555; obrobni polmer: 3px;
Poleg tega, če uporabljate CSS3 veliko na vaši spletni strani, lahko uporabite LESS elemente, da bo vaše delo veliko lažje. LESS Elements je zbirka skupnih CSS3 Mixins ki jih lahko pogosto uporabljamo na slogovnih listih, kot je polmer meje, nakloni, drop-shadow in tako naprej.
Za uporabo LESS elementov preprosto dodajte @import pravilo v slogovnem obrazcu LESS, vendar ga ne pozabite najprej prenesti in ga dodati v delovni imenik.
@import "elements.less";
Zdaj lahko ponovno uporabimo vse razredi zagotovljena s strani. \ t elementov, na primer, da dodate 3px obmejno območje do a div, lahko pišemo:
div .rounded (3px);
Za nadaljnjo uporabo glejte uradno dokumentacijo.
Ugnezdena pravila
Ko pišete sloge v navadnem CSS-ju, ste morda morda prišli skozi te tipične strukture kode.
nav višina: 40px; širina: 100%; ozadje: # 455868; obroba spodaj: 2px trdna # 283744; nav li širina: 600px; višina: 40px; nav li a color: #fff; line-height: 40px; text-shadow: 1px 1px 0px # 283744;
V navadnem CSS-ju izberemo podrejene elemente tako, da najprej ciljamo na nadrejeno v vsakem nizu pravil, kar je precej odveč, če sledimo “Najboljše prakse” načelo.
V LESS CSS lahko nize pravil poenostavimo s gnezdenje otroških elementov znotraj staršev, kot sledi;
nav višina: 40px; širina: 100%; ozadje: # 455868; obroba spodaj: 2px trdna # 283744; li širina: 600px; višina: 40px; a barva: #fff; line-height: 40px; text-shadow: 1px 1px 0px # 283744;
Dodelite lahko tudi psevdo-razredi, podobno : hover, na izbirnik z uporabo znaka (&).
Recimo, da želimo dodati : hover na oznako sidra zgoraj lahko to napišemo tako:
a barva: #fff; line-height: 40px; text-shadow: 1px 1px 0px # 283744; &: hover barva ozadja: # 000; barva: #fff;
Operacija
Operacije lahko izvajamo tudi v LESS, kot npr zbiranje, odštevanje, množenje in deljenje na številke, barve in spremenljivke v slogovni tabeli.
Recimo, da želimo, da je element B dvakrat višji od elementa A. V tem primeru ga lahko napišemo tako:
@height: 100px .element-A višina: @height; .element-B višina: @height * 2;
Kot lahko vidite zgoraj, najprej shranimo vrednost v @ višina spremenljivko, nato dodeli vrednost elementu A.
V elementu B, namesto da sami izračunamo višino, višino lahko pomnožimo z 2 z uporabo operaterja z zvezdico (*). Zdaj, ko spremenimo vrednost v @ višina spremenljivko, element B vedno ima dvakratno višino.
Oglejte si naprednejše primere delovanja v našem prejšnjem vodniku: Oblikovanje gladke menijske navigacijske vrstice.
Področje uporabe
LESS uporablja Področje uporabe koncept, kjer bodo spremenljivke podedovane najprej iz lokalnega obsega, in ko lokalno ni na voljo, bo iskal po širšem obsegu.
header @color: črna; barva ozadja: @color; nav @color: modra; barva ozadja: @color; a barva: @barva;
V zgornjem primeru je glavo ima Črna barvo ozadja, vendar navBarva ozadja bo modra ker ima spremenljivko @color v svojem lokalnem obsegu, medtem ko a bo tudi modro, ki je podedovano od bližjega starša, nav.
Končna misel
Navsezadnje upamo, da vam lahko ta objava poda osnovno razumevanje o tem, kako lahko s pomočjo LESS bolje zapisujemo CSS. Morda se sprva počutite malo nerodno, vendar, ko ga poskusite pogosteje, bo zagotovo veliko lažje.
Tukaj je nekaj vaj, ki jih spodbujam, da preučite nadaljnje nasvete in prakse, ki lahko pomagajo potisniti vašo LESS spretnost na naslednjo stopnjo.
- MANJ CSS Tutorial: Oblikovanje Slick Menu Bar za krmarjenje
- Razumevanje barvnih funkcij LESS
- 3 Nove manjše CSS funkcije, ki jih morate poznati
