LESS CSS - Ghidul pentru începători
Pre-procesorul CSS a devenit acum o bază în dezvoltarea web. Oferă CSS simplu cu trăsături de programare, cum ar fi Variables, Functions sau Mixin, și Operație care permit dezvoltatorilor web să construiască modulare, scalabile și mai ușor de gestionat.
În acest post, vom examina mai puțin care a fost unul dintre cele mai populare procesoare CSS Pre-procesoare în jurul valorii de, și a fost, de asemenea, desfășurat pe scară largă în numeroase cadre front-end, cum ar fi Bootstrap. Vom merge, de asemenea, prin utilitare de bază, instrumente și setări pentru a vă ajuta să vă desfășurați cu LESS.
Compilatorul
Pentru început, va trebui să configurați un compilator. Sintaxa mai mică este non-standard, pe specificațiile W3C. Browserul nu ar fi capabil să proceseze și să redea rezultatul, în ciuda faptului că a moștenit trăsături asemănătoare cu cele ale CSS.
Iată o scurtă prezentare a codului LESS:
@ bază de culoare: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; culoare: @ bază de culoare;
Compilatorul va procesa codul și va transforma sintaxa LESS în format CSS compatibil cu browserul:
.class1 background-color: # 2d5e8b; .class1 .class2 background-color: #fff; culoare: # 2d5e8b;
Există o serie de instrumente pentru compilarea CSS:
Utilizarea JavaScript
Mai puțin vine cu un less.js fișier care este foarte ușor de instalat pe site-ul dvs. Creați o foaie de stil cu .Mai puțin extensie și conectați - o în documentul dvs. utilizând rel = "stylesheet / mai puțin" atribut.
Puteți obține fișierul JS aici, descărcați-l prin Bower manager de pachete, altul direct link-ul către CDN, cum ar fi:
Sunteți toți setați și puteți să compuneți stiluri în cadrul .Mai puțin. Sintaxa LESS va fi compilată în timp ce pagina se încarcă. Ține minte că folosind JavaScript este descurajat în etapa de producție, deoarece va afecta grav performanța site-ului.
Ar trebui întotdeauna să compilați sintaxa LESS mai devreme și numai servește CSS regulat in schimb. Poți să folosești Terminal, un Runner de sarcini, cum ar fi mormăit sau Înghiţitură, sau o aplicație grafică pentru a face acest lucru.
Utilizarea CLI
Mai puțin oferă o interfață de linie de comandă nativă (CLI), lessc, care gestionează mai multe sarcini dincolo de compilarea sintaxei LESS. Utilizând CLI, putem linge codurile, putem comprima fișierele și putem crea o hartă sursă. Comanda se bazează pe Node.js care permite în mod eficient comenzii să funcționeze în Windows, OS X și Linux.
Asigurați-vă că Node.js a fost instalat (altfel apucați programul de instalare aici), apoi instalați LESS CLI prin NPM (Node Package Manager) utilizând următoarea linie de comandă.
npm install -g mai puțin
Acum aveți lessc comandă la dispoziția dvs. pentru a compila LESS în CSS:
stil stilless.css
Utilizarea Tasker Runner
Task runner este un instrument care automatizează sarcinile de dezvoltare și fluxurile de lucru. Mai degrabă decât să rulați lessc comanda de fiecare data cand dorim sa ne compilam codurile, putem seta instalarea unui runner de task-uri si sa-l setam sa vada schimbarile in fisierele LESS si sa compileze imediat LESS in CSS.
Două instrumente populare din această categorie de astăzi sunt Grunt și Gulp. Avem o serie de posturi care acoperă aceste instrumente. Verificați posturile pentru a afla cum să implementați aceste instrumente în fluxul de lucru.
- Cum să utilizați Grunt pentru a vă automatiza fluxul de lucru
- Noțiuni de bază cu Gulp.js
- Bătălia de a construi scripturi: Gulp Vs Grunt
Utilizarea aplicației grafice
Pentru cei care nu sunt obișnuiți să utilizeze Terminal și linii de comandă, ei pot opta pentru o interfață grafică în schimb. Există o mulțime de aplicații pentru a compila mai puțin astăzi pentru toate platformele - unele gratuite, unele plătite
Iată lista completă:
| App | Platformă | Cost |
| Amestec | OS X / Windows | Liber |
| Koala | OS X / Windows / Linux | Liber |
| Prepros | OS X / Windows | Freemium (USD29) |
| winless | ferestre | Liber |
| CodeKit | OS X | USD32 |
Ce compilator pe care îl alegeți (în afară de JavaScript) nu contează cu adevărat, sincer, atâta timp cât instrumentul funcționează și completează fluxul de lucru, mergeți pentru el.
Editorul de coduri
Puteți utiliza orice editor de coduri. Pur și simplu instalați un plugin sau o extensie pentru a evidenția sintaxa LESS cu culori corespunzătoare, o caracteristică disponibilă pentru aproape toți editorii de cod și IDE-uri, inclusiv SublimeText, Notepad ++, VisualStudio, TextMate și Eclipse pentru a numi câteva.
Acum, când avem setul de compilatoare și editorul de coduri, putem începe să scriem stilurile CSS cu sintaxa LESS.
LESS Sintaxă
Spre deosebire de CSS obișnuit așa cum o știm, LESS funcționează mult mai mult ca un limbaj de programare. Este dinamic, deci așteptați să găsiți niște terminologii variabile, operație și domeniu pe parcurs.
variabile
Mai întâi de toate, să aruncăm o privire la variabile.
Dacă ați lucrat destul timp cu CSS, probabil ați scris ceva de genul acesta, unde avem valori repetitive atribuite în blocurile de declarații în întreaga foaie de stil.
.class1 background-color: # 2d5e8b; .class2 background-color: #fff; culoare: # 2d5e8b; .class3 frontieră: 1px solid # 2d5e8b;
Această practică este de fapt bine - până când ne găsim că trebuie să trecem prin mai mult decât o mie sau mai multe fragmente similare în întreaga foaie de stil. Acest lucru se poate întâmpla atunci când se construiește un site web la scară largă. Munca va deveni plictisitoare.
Dacă folosim un pre-procesor CSS, cum ar fi LESS, instanța de mai sus nu ar fi o problemă - putem folosi variabile. Variabilele ne vor permite să stocăm o constantă valoare care ulterior poate fi refolosită în întreaga foaie de stil.
@ bază de culoare: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; culoare: @ bază de culoare; .class3 graniță: 1px solid @ color-base;
În exemplul de mai sus, stocăm culoarea # 2d5e8b în @ Culoare-bază variabil. Când doriți să modificați culoarea, trebuie doar să modificați valoarea din această variabilă.
În afară de culoare, puteți pune și alte valori în variabile, cum ar fi de exemplu:
@ font-family: Georgia @ punct-border: punctată @transition: linear @opacity: 0.5
Mixins
În LESS, putem folosi Mixins să reutilizeze declarații întregi într-o regulă CSS stabilită într-un alt set de reguli. Iată un exemplu:
.gradiente background: #eaeaea; fundal: gradient linear (top, #eaeaea, #cccccc); fundal: -o-gradient linear (top, #eaeaea, #cccccc); fundal: -ms-gradient linear (top, #eaeaea, #cccccc); fundal: -moz-linear-gradient (top, #eaeaea, #cccccc); fundal: -webkit-gradient linear (top, #eaeaea, #cccccc);
În fragmentul de mai sus, am setat implicit o valoare prestabilită gradient culoare în interior .gradienți clasă. Ori de câte ori dorim să adăugăm gradienții, pur și simplu inserați .gradienți pe aici:
div .gradients; frontieră: 1px solid # 555; raza de graniță: 3px;
.cutie va moșteni tot blocul de declarație din interiorul lui .gradienți. Deci, regula CSS de mai sus este egală cu următorul CSS simplu:
div fundal: #eaeaea; fundal: gradient linear (top, #eaeaea, #cccccc); fundal: -o-gradient linear (top, #eaeaea, #cccccc); fundal: -ms-gradient linear (top, #eaeaea, #cccccc); fundal: -moz-linear-gradient (top, #eaeaea, #cccccc); fundal: -webkit-gradient linear (top, #eaeaea, #cccccc); frontieră: 1px solid # 555; raza de graniță: 3px;
Mai mult, dacă utilizați CSS3 foarte mult pe site-ul dvs., puteți utiliza mai puține elemente pentru a vă face munca mult mai ușoară. LESS Elements este o colecție de elemente comune CSS3 Mixins pe care le putem folosi adesea în foi de stil, cum ar fi border-radius, gradienți, umbra si asa mai departe.
Pentru a utiliza mai puține elemente, pur și simplu adăugați @import regulă în foaia de stil LESS, dar nu uitați să o descărcați mai întâi și să o adăugați în directorul dvs. de lucru.
@import "elements.less";
Putem reutiliza acum toate clase furnizat de către elements.less, de exemplu, să adăugați 3px raza de raza la a div, putem scrie:
div .inclus (3px);
Pentru o utilizare ulterioară, consultați documentația oficială.
Reguli născute
Când scrieți stiluri în CSS simplu, este posibil să fi venit prin aceste structuri tipice de cod.
nav height: 40px; lățime: 100%; fundal: # 455868; frontieră-fund: 2px solid # 283744; nav li lățime: 600px; înălțime: 40px; nav li a culoare: #fff; linia-înălțime: 40px; text-shadow: 1px 1px 0px # 283744;
În CSS simplu, selectăm elementele copilului vizând mai întâi părintele din fiecare set de reguli, ceea ce este considerabil redundant dacă urmăm “cele mai bune practici” principiu.
În LESS CSS, putem simplifica seturile de reguli prin cuibărind elementele copilului în interiorul părinților, după cum urmează;
nav height: 40px; lățime: 100%; fundal: # 455868; frontieră-fund: 2px solid # 283744; li lățime: 600px; înălțime: 40px; a culoare: #fff; linia-înălțime: 40px; text-shadow: 1px 1px 0px # 283744;
De asemenea, puteți atribui pseudo-clase, ca :planare, la selector utilizând simbolul ampersand (&).
Să spunem că vrem să adăugăm :planare la eticheta de ancorare de mai sus, o putem scrie astfel:
a culoare: #fff; linia-înălțime: 40px; text-shadow: 1px 1px 0px # 283744; &: mutați background-color: # 000; culoare: #fff;
operație
De asemenea, putem efectua operațiuni în LESS, cum ar fi adunarea, scăderea, înmulțirea și împărțirea la numere, culori și variabile din foaia de stil.
Să presupunem că dorim ca elementul B să fie de două ori mai mare decât elementul A. În acest caz, putem scrie astfel:
@ vârf: 100px. element-A height: @ height; . element-B înălțime: @ vârf * 2;
După cum puteți vedea mai sus, vom păstra mai întâi valoarea în @înălţime variabilă, apoi atribuiți valoarea elementului A.
În elementul B, mai degrabă decât să calculam înălțimea noi înșine, putem multiplica înălțimea cu 2 folosind operatorul asterisc (*). Acum, ori de câte ori schimbăm valoarea în @înălţime variabil, element B va avea întotdeauna de două ori înălțimea.
Consultați mai multe exemple de operații avansate în tutorialul nostru precedent: Proiectarea unei bare de navigare cu meniuri.
domeniu
LESS aplică aplicația domeniu în cazul în care variabilele vor fi moștenite mai întâi din domeniul de aplicare local și atunci când acestea nu sunt disponibile la nivel local, acestea vor căuta într-un domeniu mai larg.
antet @color: negru; fundal-culoare: @color; nav @color: albastru; fundal-culoare: @color; a culoare: @color;
În exemplul de mai sus, antet are o negru culoarea de fundal, dar navculoarea de fundal va fi albastru deoarece are variabila @color în domeniul său de aplicare local, în timp ce A va avea, de asemenea, albastru care este moștenit de la părintele mai apropiat, nav.
Gândirea finală
În cele din urmă, sperăm că această postare vă poate oferi o înțelegere de bază cu privire la modul în care putem scrie CSS într-un mod mai bun folosind LESS. Poate că te simți puțin ciudat la început, dar în timp ce încerci mai des, va deveni cu siguranță mult mai ușor.
Iată câteva tutoriale pe care vă încurajez să căutați sfaturi și practici suplimentare, care vă pot ajuta să vă împingeți abilitățile LOT până la nivelul următor.
- LESS CSS Tutorial: Proiectarea unei bare de navigare cu meniuri
- Înțelegerea funcțiilor de culoare mai mici
- 3 Noi caracteristici mai puțin CSS trebuie să știți
