Ce este LESS și cum se folosește. LESS (limbaj de stil)

o viziune mai puțin apocaliptică asupra viitorului

vederi nu atât de pesimiste despre viitor

O moștenire corectă nu este mai puțin plăcută decât o soție corectă.

O moștenire frumoasă nu este mai puțin plăcută decât o soție drăguță. ☰

Traficul este unul dintre aspectele mai puțin agreabile ale vieții orașului.

Blocajele de trafic sunt unul dintre cele mai puțin plăcute aspecte ale vieții orașului. ☰

Conturul devenea din ce în ce mai puțin distinct pe măsură ce lumina se stingea.

Contururile au devenit din ce în ce mai puțin clare, în timp ce lumina s-a stins treptat. ☰

Comunitatea cere un stil de poliție mai puțin agresiv.

Comunitatea cere un stil mai puțin agresiv de aplicare a legii. ☰

Mâncați mai puțin și faceți mai mult sport dacă doriți să trăiți până la o bătrânețe copt.

Mâncați mai puțin și faceți mai mult sport dacă doriți să trăiți până la o bătrânețe copt. ☰

Vederea din spate a hotelului era chiar mai puțin atrăgătoare decât cea din față.

Din spate acest hotel arăta chiar mai puțin atractiv decât din față. ☰

Nu mai puțin un luminator decât Wilhelm Furtwangler a condus premiera.

Dirijorul de la premieră a fost nimeni altul decât celebritatea Wilhelm Furtwängler însuși. ☰

Sistemul eșuează cel mai dezastruos în rândul copiilor mai puțin academici.

Acest sistem este absolut nepotrivit copiilor care nu sunt înclinați să studieze. ☰

— Vrei să vii cu mine, te rog? A fost mai puțin o cerere decât o comandă.

Vino cu mine te rog. - Nu a fost atât o cerere, cât o comandă. ☰

Pe măsură ce treceau anii, părea să-i pese din ce în ce mai puțin de reputația sa.

De-a lungul timpului, a început să pară că îi pasă din ce în ce mai puțin de propria reputație. ☰

La premieră a participat nu mai puțin un personaj decât însuși președintele.

La premieră au participat chiar nu oricine, ci chiar președintele, în persoană. ☰

Oamenii care pot exercita un anumit control asupra mediului înconjurător se simt mai puțin anxioși.

O persoană care poate exercita un anumit control asupra mediului înconjurător se simte mai puțin anxioasă. ☰

Oamenii plini de spirit sunt mai însuflețiți și mai puțin îngrijorați de situațiile sociale.

Oamenii sociabili sunt mai veseli și mai puțin preocupați de problemele sociale. ☰

Când și-a pierdut aspectul (=a devenit mai puțin atractivă) i-a fost greu să obțină de lucru.

Pe măsură ce și-a pierdut aspectul (adică, a devenit mai puțin atractivă), i-a fost foarte greu să obțină un loc de muncă. ☰

Sondajele arată că alegătorii cresc din ce în ce mai puțin mulțumiți de actuala administrație.

Sondajele arată că alegătorii sunt din ce în ce mai nemulțumiți de actuala administrație. ☰

Nu mi-ar păsa mai puțin de ea.

Mi-ar putea păsa mai puțin despre ce tu crezi. *

Nu-mi pasă ce crezi. ☰

Lesser Wain

Mai puțin din sosul tău, fata mea!

Mai puțină insolență, fata mea! ☰

Din două rele alegeți mai puțin.

Din două rele alegeți mai puțin. (ultimul) ☰

Toată carnea se vinde mai puțin osul.

Toată carnea se vinde fără oase. ☰

Merge mai puțin decât ar trebui.

Dacă luăm în considerare preprocesoarele împreună cu CSS, obținem o imagine mai clară decât luarea în considerare a conceptului de preprocesor separat.

Definiție

Preprocesorul CSS (din limba engleză preprocesor CSS) este un supliment pentru CSS care adaugă capacități indisponibile anterior la CSS folosind noi constructe sintactice.

Sarcina principală a preprocesorului este de a furniza structuri sintactice convenabile pentru ca dezvoltatorul să le simplifice și, prin urmare, să accelereze dezvoltarea și sprijinirea stilurilor în proiecte.

Preprocesoarele CSS convertesc codul scris folosind un limbaj de preprocesor în cod CSS curat și valid.

Cu preprocesoare, puteți scrie cod care vizează:

Lizibilitatea umană
Structurat și logic
Performanţă

Și aceasta este doar o mică parte din ceea ce vă poate oferi preprocesorul. Dar nu te devansa.

Zahar sintactic

Înainte de a ne uita mai departe la preprocesoarele CSS, să ne actualizăm vocabularul cu un nou concept: zahăr sintactic.

Syntactic Sugar (din limba engleză syntactic sugar) sunt completări la sintaxa unui limbaj de programare care nu introduc modificări semnificative sau caracteristici noi, dar fac limbajul mai lizibil pentru oameni.

Zahărul sintactic introduce în limbaj opțiuni alternativeînregistrări ale construcțiilor încorporate în această limbă. Opțiunile alternative de înregistrare ar trebui înțelese ca construcții mai scurte sau mai convenabile pentru oameni, care în cele din urmă vor fi convertite de preprocesor în limba sursă, fără zahăr sintactic.

Dacă încercăm să aplicăm acest concept la preprocesoarele CSS, atunci acesta caz general, descrie pe deplin esența lor. Permiteți-mi să vă reamintesc încă o dată că sarcina principală a preprocesoarelor este de a simplifica și accelera dezvoltarea, dar cum altfel se poate face acest lucru dacă nu introduceți opțiuni alternative de înregistrare?

Ce tipuri de preprocesoare CSS există?

Este timpul să trecem la mai multe exemple concrete, și anume preprocesoarelor CSS înșiși. La momentul scrierii, există trei preprocesoare populare:

Sass (SCSS)
Stylus

Și câțiva jucători minori pentru noi:

Foi de stil de închidere
CSS Crush

Vom vorbi despre primele trei separat puțin mai jos, dar despre ultimele două nu vom vorbi deloc, din cauza nepopularității lor. Dacă se dorește, descrierile acestor preprocesoare pot fi găsite cu ușurință într-un motor de căutare.

Ce rost are folosirea preprocesoarelor?

După cum am menționat mai sus, principalele avantaje sunt lizibilitatea codului, structurarea și productivitatea crescută.

Există și alte motive pentru a începe să utilizați un preprocesor astăzi. Vreau să atrag atenția asupra acestui lucru, deoarece dezvoltatorii din trecut, și mulți chiar și acum, refuză să folosească preprocesoare, considerându-le complexe, de neînțeles și inutile.

CSS este greu

CSS standard este dificil. Sintaxa non-imbricare pe care o oferă preprocesoarele CSS este pur și simplu greu de citit. În plus, trebuie să vă amintiți numele părintelui atunci când cuibăriți. Lipsa variabilelor normale și a „funcțiilor” face codul CSS dezordonat și îngust la minte.

Documentatie disponibila

Au dispărut vremurile în care documentația de la preprocesoare era disponibilă numai pentru cei „cunoscuți”. Acum oricine poate cât mai repede posibil stăpânește oricare dintre preprocesoare și cu costuri minime putere

Ușurință în utilizare

Utilizarea preprocesoarelor este mai ușoară decât înainte și mult mai ușoară. Pentru a face acest lucru, trebuie doar să instalați un program care va monitoriza fișierele destinate preprocesorului și, atunci când se schimbă, va compila conținutul acestor fișiere în cod CSS pur.

Pentru utilizatorii mai avansați există constructori speciali de proiecte. Nu credeți că doar pentru că utilizați un program de preprocesor, mai degrabă decât un constructor de proiecte, nu sunteți suficient de cool. De fapt, astfel de robinete oferă control totalși setări avansate, dar nu te face un Jedi.

Structura și consistența codului

Cea mai populară caracteristică oferită de orice preprocesor CSS este capacitatea de a imbrica selectoare unul în celălalt. Nu voi da un exemplu acum, deoarece partea corespunzătoare a cărții va fi scrisă despre capacitățile lui Less, inclusiv imbricarea. În acest moment, tot ce trebuie să știți este că atunci când utilizați preprocesoare, puteți imbrica un selector într-un altul și altul într-o treime, rezultând ceva similar cu cuprinsul unei cărți:

1. Selector parental 1.1. Selector imbricat 1.2. Selector imbricat 1.2.1. Selector imbricat 1.3. Selector imbricat

Desigur, în viata reala Selectorii nu pot începe cu numere, totuși, pentru a face o paralelă între imbricare și cuprins, cred că o astfel de omisiune este potrivită aici.

Impurităţi

Pentru a spune foarte pe scurt, folosind mixins (din engleză Mixins), puteți face codul reutilizabil. Acest lucru ajută la evitarea claselor de ajutor în marcarea sau duplicarea proprietăților de la selector la selector.

Modularitate

Un alt bonus care m-ar convinge să încep să folosesc un preprocesor CSS chiar acum ar fi capacitatea de a imbrica fișiere în fișiere, adică, cu alte cuvinte, de a concatena fișiere într-o anumită secvență. Da, acest lucru se poate face folosind CSS pur, dar împreună cu alte caracteristici se dovedește a fi un instrument foarte puternic.

În același timp, avem oportunitatea de a partaja module (biblioteci mixin) pe care le-am creat pentru nevoile noastre și pe care le-am găsit utile pentru alte persoane. Se pare că orice dezvoltator vă poate descărca biblioteca și o poate folosi în propriile scopuri, apelând mixin-urile pe care le-ați scris după cum este necesar.

De ce nu așteptați ca CSS să evolueze?

Dezvoltarea CSS face pași foarte mici și incerti, deoarece W3C prioritizează viteza de răspuns (performanță) CSS. Pe de o parte, acest lucru este corect și foarte important, dar, pe de altă parte, este o lipsă de confort pentru dezvoltatori.

Ca exemplu, voi folosi una dintre specificațiile CSS4, care a fost introdusă sub presiunea dezvoltatorilor - selectorul părinte. Un drum atât de lung de la idee la decizie s-a datorat faptului că W3C a considerat un astfel de selector ca fiind lent și utilizarea lui ulterioară pe site-uri ar duce la încetiniri sălbatice. Desigur, vorbim despre utilizarea pe scară largă a acestui selector, și nu despre cazuri izolate.

Așa că nu vă așteptați la revoluții și schimbări în viitorul apropiat care ar putea umbri funcționalitatea și capacitățile preprocesoarelor CSS.

Tipuri de preprocesoare

Desigur, ca în orice alt domeniu, există întotdeauna concurență, iar pe piața de preprocesoare există acum trei tabere principale, în război:

Sass (SCSS)
Stylus

Le numesc ostili, pentru că fiecare adept al unuia dintre preprocesatori consideră că este de datoria lui să arunce impurități în reprezentanții altor, să spunem, credințe. Această ostilitate este deosebit de comună printre fanii preprocesorului Sass, care este considerat cel mai vechi și mai puternic dintre toate cele trei preprocesoare.

Pentru a fi complet, vreau să ofer o scurtă prezentare generală a fiecărui preprocesor:

Mai puțin

De fapt, eroul acestei cărți. Cel mai popular preprocesor la momentul scrierii. Fondat în 2009 de Alexis Sellier și scris în JavaScript (scris inițial în Ruby, dar Alexis a făcut mișcarea potrivită la momentul potrivit). Are totul capabilități de bază preprocesoare și chiar mai mult, dar nu are structuri și bucle condiționate în sensul obișnuit pentru noi. Principalul avantaj este simplitatea sa, aproape standard pentru Sintaxa CSSși capacitatea de a extinde funcționalitatea printr-un sistem de plugin.

Sass (SCSS)

Cel mai puternic dintre preprocesoarele CSS. Are o comunitate de dezvoltatori destul de mare. Fondat în 2007 ca un modul pentru HAML și scris în Ruby (există un port pentru C++). Are o gamă mult mai mare de capabilități în comparație cu Less. Capacitățile preprocesorului în sine sunt extinse de biblioteca multifuncțională Compass, care vă permite să depășiți cadru CSSși lucrează, de exemplu, cu sprite-uri în modul automat.

Are două sintaxe:

Sass (Syntactically Awesome Style Sheets) este o sintaxă CSS simplificată care se bazează pe identitate. Considerat ca invechit.
SCSS (Sassy CSS) - bazat pe sintaxa standard CSS.

Stylus

Cel mai tânăr, dar în același timp cel mai promițător preprocesor CSS. Fondată în 2010 de o personalitate binecunoscută din cercurile noastre, TJ Holowaychuk. Ei spun că acesta este cel mai convenabil și mai extensibil preprocesor și, de asemenea, este mai flexibil decât Sass. Scris în JavaScript. Acceptă o mulțime de opțiuni de sintaxă de la CSS la simplificat (lipsesc: , ; , () și unele paranteze).

CSS - simplu și instrument accesibil. Cu toate acestea, are limitările sale, mai ales când vine vorba de menținerea codului finit. Când trebuie să modificați mii de linii de stil răspândite în mai multe fișiere, sarcina devine o provocare.

Pentru a depăși această problemă, au fost create preprocesoare CSS care vă permit să combinați stilurile în mod dinamic. Există mai multe opțiuni (cum ar fi LESS și SASS), dar în această lecție ne vom uita la LESS.

LESS Editor

La momentul scrierii acestui tutorial, exista un singur editor dedicat în întregime lucrului cu fișiere LESS - ChrunchApp. Aceasta aplicație cross platform, construit pe Adobe Air, poate fi rulat pe Windows, Mac OSX și Linux.

Pentru alți editori (cum ar fi Dreamweaver, Coda, NotePad++ și SublimeText 2) există plugin-uri sau suplimente care vă permit să furnizați MAI MAI MĂSINA evidențiere a sintaxei.

Folosind LESS

LESS este foarte ușor de utilizat. Trebuie doar să adăugați două rânduri la eticheta de cap documentul dvs. HTML. Prima linie conține numele fișierului tău .less, iar a doua linie conține conexiunea bibliotecii less.js (poate fi descărcată de pe site-ul oficial).

În lecția noastră vom arăta o altă cale. Vom folosi compilatorul LESS: pentru Windows putem folosi WinLess, iar pentru Mac OSX putem folosi LESS.app.

Creați un fișier .less în directorul de lucru. Apoi deschideți compilatorul (WinLESS sau LESS.app) și importați directorul de lucru în el. compilatorul va găsi toate fișierele .less. Asta e tot. Acum, ori de câte ori schimbăm fișierul .less, compilatorul va genera automat codul CSS obișnuit într-un fișier .css care este acceptat de browser.

Rămâne doar să legăm fișier CSS la documentul HTML:

MĂRINA sintaxă

Spre deosebire de CSS obișnuit, LESS este mai mult ca un limbaj de programare. Este dinamic, așa că este logic să ne așteptăm să folosească variabile, operații și domeniul de aplicare.

Variabile

Să ne uităm mai întâi la variabile.

Când lucrați cu CSS, probabil că ați întâlnit adesea o situație în care o valoare repetată este setată în mai multe blocuri de-a lungul unei foi de stil.

Class1 (culoarea fundalului: #2d5e8b; ) .class2 (culoarea fundalului: #fff; culoarea: #2d5e8b; ) .class3 (chenar: 1px solid #2d5e8b; )

Totul este grozav până când trebuie să parcurgeți 1000 de secțiuni identice de cod în întreaga foaie de stil pentru a schimba valoarea. Această situație poate apărea atunci când lucrați la un proiect mare.

Când se utilizează preprocesorul LESS, această problemă este ușor de rezolvat folosind variabile. Variabilele vă permit să stocați valori care pot fi reutilizate într-o foaie de stil.

@color-base: #2d5e8b; .class1 (culoare de fundal: @color-base; ) .class2 (culoare de fundal: #fff; culoare: @color-base; ) .class3 (chenar: 1px solid @color-base; )

În exemplul de mai sus, variabila @color-base stochează valoarea #2d5e8b . Și când trebuie să schimbați culoarea, va trebui doar să schimbați valoarea din variabilă.

Puteți utiliza alte valori în variabilă:

@font-family: Georgia @dot-border: punctat @tranziție: linear @opacitate: 0,5

Aditivi

În LESS, puteți folosi mixuri pentru a stoca un set de reguli și a le aplica altor seturi. De exemplu:

Gradienți ( fundal: #eaeaea; fundal: gradient liniar(sus, #eaeaea, #cccccc); fundal: -o-gradient-liniar(sus, #eaeaea, #cccccc); fundal: -ms-linear-gradient(sus , #eaeaea, #cccccc: -moz-linear-gradient(sus, #eaeaea, #cccccc): -webkit-linear-gradient(sus, #eaeaea, #cccccc);

În exemplul de mai sus, setăm culoarea gradientului în clasa .gradients. Apoi, când trebuie să adăugați un gradient, trebuie doar să inserați .gradients astfel:

Casetă ( .gradienți; chenar: 1px solid #555; chenar-rază: 3px; )

Clasa .box moștenește toate declarațiile de la .gradients . Prin urmare, expresia LESS de mai sus este echivalentă cu următorul cod CSS obișnuit:

Caseta ( fundal: #eaeaea; fundal: gradient-liniar(sus, #eaeaea, #cccccc); fundal: -o-gradient-liniar(sus, #eaeaea, #cccccc); fundal: -ms-linear-gradient(sus , #eaeaea, #cccccc: -moz-linear-gradient(sus, #eaeaea, #cccccc): -webkit-linear-gradient(sus, #cccccc ; )

Când lucrați cu CSS3, puteți utiliza biblioteca LESS Elements pentru a vă ușura munca. LESS Elements este o colecție de mixuri CSS3 obișnuite care sunt adesea folosite în stil, cum ar fi raza de margine, degrade, umbră și așa mai departe.

Pentru a utiliza LESS, trebuie doar să adăugați regula @import în fișierul LESS. Trebuie doar să descărcați biblioteca și să o plasați în directorul de lucru.

@import "elements.less";

Acum puteți folosi toate clasele din elements.less . De exemplu, pentru a adăuga o rază de colț de margine de 3 px la element div, trebuie să scrieți:

Div ( .rounded(3px); )

Reguli imbricate

Când lucrați cu cod CSS obișnuit, următoarea structură de cod este destul de comună:

Nav (înălțime: 40px; lățime: 100%; fundal: #455868; chenar-jos: 2px solid #283744; ) nav li ( lățime: 600px; înălțime: 40px; ) nav li a (culoare: #fff; line-height : 40px; text-shadow: 1px 1px 0px #283744;

În codul CSS obișnuit, selectăm copii prin specificarea unui părinte în fiecare set de reguli.

În LESS, puteți îmbunătăți setul de reguli de mai sus prin imbricarea copiilor într-un element părinte:

Nav ( înălțime: 40px; lățime: 100%; fundal: #455868; chenar-jos: 2px solid #283744; li ( lățime: 600px; înălțime: 40px; a ( culoare: #fff; line-height: 40px; text-) umbră: 1px 1px 0px #283744 ) ) )

De asemenea, puteți utiliza pseudo-clase, de exemplu:hover, folosind caracterul ampersand (&). Să presupunem că vrem să adăugăm :hover la eticheta de link:

A (culoare: #fff; înălțimea liniei: 40px; umbră text: 1px 1px 0px #283744; &:hover (culoare fundal: #000; culoare: #fff; ) )

Operațiuni

Puteți utiliza și operațiuni în LESS. Sunt disponibile adunarea, scăderea, înmulțirea și împărțirea.

Să presupunem că elementul B este de două ori mai înalt decât elementul A:

@înălțime: 100px .element-A ( înălțime: @înălțime; ) .element-B ( înălțime: @înălțime * 2; )

Mai întâi definim variabila @height și o atribuim pentru a indica înălțimea elementului A.

În elementul B, pur și simplu înmulțim valoarea variabilei cu 2. Acum, când schimbăm valoarea variabilei @height, elementul B va fi întotdeauna de două ori mai înalt.

Zona de vizibilitate

LESS folosește conceptul de domeniu de aplicare. Variabilele din contextul local sunt utilizate mai întâi, iar dacă nu sunt acolo, se face o căutare în domeniul mai larg.

Antet ( @culoare: negru; culoare de fundal: @culoare; nav ( @culoare: albastru; culoare de fundal: @culoare; a (culoare: @culoare; ) ) )

În exemplul de mai sus, antetul are o variabilă de culoare setată la negru, dar fundalul elementului de navigare va fi albastru deoarece variabila @color este în contextul local.

Concluzie

În următoarele lecții din serie, vom analiza un exemplu de utilizare reală a LESS și câteva aspecte utile ale setului de instrumente.

În acest articol vom vorbi despre capacitățile preprocesorului Less, pe care, din cauza unor forțe necunoscute, aproape nimeni nu le folosește. În plus, vom vorbi despre funcționalitatea lipsă și vom încerca să o adăugăm.

Vă sugerez să începeți cu un mic memento a ceea ce nu ar trebui să faceți, chiar dacă doriți cu adevărat. Uită-te la cadrul Alesya, care a fost dezvoltat de un prieten care învață Mai puțin altor oameni. Încercați să aruncați o privire atentă la fișierul ./core/functions.less . Deși nu, nu urmați linkul, priviți doar captura de ecran a unei mici părți a acestui fișier. Când l-am văzut pentru prima dată, am fost pur și simplu șocată.

Justificarea este că ciclurile sunt foarte lente, ca urmare, viteza de traducere a lui Less în CSS scade, iar timpul de traducere crește. Pentium 4? Fără supărare, dar este frustrant.

Voi oferi un extras din cartea „HTML5 pentru web designeri” scrisă de Jeremy Keith, care nu cu mult timp în urmă a devenit eroul paginilor publice pe VK:

Să presupunem că există un monstru rău în lume care urăște internetul și toți utilizatorii de internet. Acestui domn probabil că nu-i pasă că încorporarea unui fișier audio pe o pagină care începe să fie redată automat este incredibil de nepoliticos și stupid. Folosind atributul de redare automată, îi poți satisface dorințele profund vicioase.

Dacă folosești vreodată atributul de redare automată în acest fel, să știi că te voi găsi.

Prin urmare, dacă folosești și Less, știi că ei deja te caută și te vor găsi în curând.

Extinderea selectorului

Avem un întrerupător de flux tipic zilelor noastre:

Clearfix (&:înainte, &:după (conținut: „ „; afișare: tabel; ) &:după (clar: ambele; ) )

Și un selector care implică utilizarea clearfix-ului. Desigur, puteți utiliza .clearfix ca mixin și îl puteți produce peste tot o cantitate mare cod inutil, dar necesar. Cu toate acestea, puteți evita acest lucru utilizând extinderea selectorului.

De exemplu, așa:

Bara de navigare ( &:extend(.clearfix all); ... ) .navbar-collapse ( &:extend(.clearfix all); ... ) .ad ( &:extend(.clearfix all); ... )

Ca rezultat, class.clearfix nostru începe să comunice cu prietenii din diverse părți stilurile dvs., fără a partaja nimănui linii suplimentare de cod:

Clearfix:înainte, .clearfix:după, .navbar:înainte, .navbar:după, .navbar-collapse:înainte, .navbar-collapse:după, .ad:înainte, .ad:după ( conținut: " "; afișare: table; ) .clearfix:după, .navbar:după, .navbar-collapse:după, .ad:după (clear: ambele; )

Desigur, nu ar trebui să abuzați de asta. Sincer să fiu, vă sfătuiesc să utilizați extensia selector numai pentru clearfix și în cazurile în care se aplică regula: „Ei bine, este chiar necesar, nu pot face nimic, altfel va fi mai rău.” Nu ar trebui să utilizați extensii de selectare atunci când au loc manipulări cu stiluri de elemente. Cea mai frecventă și stupidă greșeală:

Clasa (culoare: #fff; fundal: #fff; ) .new-class ( &:extend(.class); ) // .class, // .new-class ( // culoare: #fff; // fundal: #fff; // )

Nu poți face asta. Asta e o prostie. Este mai bine să folosiți .class ca mixin:

Clasa (culoare: #fff; fundal: #fff; ) .new-class ( .class; ) // .class ( // culoare: #fff; // fundal: #fff; // ) // .new-class ( // culoare: #fff; // fundal: #fff; // )

Tine minte asta!

Opțiuni de import

Vă rugăm să aruncați o privire la secțiunea de documentație „opțiuni directive de import”.

Voi oferi doar o scurtă descriere a celor mai importanți dintre acești parametri:

referinţă

Vă permite să utilizați fișiere .less, dar să nu afișați conținutul acestora fără un apel explicit. O opțiune foarte utilă dacă utilizați Bootstrap ca bibliotecă și nu cadru, adică:

@import (referință) „bower_components/bootstrap/less/bootstrap”; .alerta mea ( .alerta; )

Utilizarea acestui parametru face posibilă includerea fișierelor fără extensie .less. Parametrul nu este necesar, deoarece totul va funcționa fără el, dar, cu toate acestea, dacă vă place comanda, va fi util. Acest parametru poate fi utilizat atunci când se conectează fișiere cu altă extensie decât .less, de exemplu, .variables, .mixins.

Trebuie să-l aplicați astfel:

@import (cuvânt cheie) „nume fișier”;

CU descriere detaliata iar exemple pot fi găsite pe paginile de documentație. Așa că, politicos, vă trimit, cititorul meu, să citiți documentația. Sentimente de neuitat :)

Condiționale

Less are condiționale. Da, nu sunt cu drepturi depline în comparație cu alți preprocesoare, dar totuși prezența lor nu poate decât să se bucure. Mi se par chiar mai convenabile decât @if în Sass, deși nu există nicio diferență practică.

Mixin(@variable) ( și când (@variabilă = 1) (conținut: „ADEVĂRAT”) și când nu (@variabilă = 1) (conținut: „FALSE”) .class-test ( .mixin(1); .mixin (2)

Ca rezultat, vom obține următorul CSS:

Test de clasă (conținut: „adevărat”; conținut: „FALSE”; )

Ce s-a intamplat? Magie?

Nu chiar. Cuvântul cheie when aici înlocuiește obișnuitul if în toate limbajele de programare și are doar două poarta logica: nu - negație și - pur și simplu și si gata, nu mai este nimic. Nu pot face nimic deosebit de grozav cu asta, dar folosesc operator condițional astfel încât să nu fie generat cod inutil. O astfel de situație, de exemplu, este proprietate frontier-radiusîn generatorul de stil de buton. De ce orice proprietate ar fi specificată din nou în timpul generării dacă valoarea ei nu joacă un rol (0)? - Așa e, nu e nevoie.

Interpolarea variabilelor

Există un design interesant în Less când obținem valoarea unei variabile în funcție de altele.

// Variabile @clr-grey-100: #fafafa; @clr-grey-200: #f5f5f5; @clr-red-100: #ffebee; @clr-red-200: #ffcdd2; .mixin(@culoare, @temperatură: 500) ( culoare: ~"@(clr-@(culoare)-@(temperature))"; fundal: e("@(clr-@(culore)-@(temperature) )"); ) .class-test ( .mixin (gri, 100); &-test ( .mixin (roșu, 200); ) )

Acest exemplu apelează un mixin ai cărui parametri sunt color ( @culoare) și temperatura acestuia ( @temperatura). Apoi, colectăm toate variabilele într-una singură, adică, pur și simplu, construim o nouă variabilă și obținem valoarea acesteia. Procesul în care un șir, relativ vorbind, se transformă într-un apel la o variabilă este interpolarea variabilelor.

Rețineți că în acest exemplu folosim bretele după câine - acest lucru este foarte important.

La iesire:

Class-test (culoare: #fafafa; fundal: #fafafa; ) .class-test-test (culoare: #ffcdd2; fundal: #ffcdd2; )

Apropo, nu am putut găsi asta în Sass și Stylus. Poate un cititor atent îmi poate spune? :)

Cicluri

Mulți adepți Preprocesoare Sassși Stylus insistă că Less nu are bucle, dar există unele, deși nu sunt la fel ca ale tuturor celorlalți. Este pur și simplu incomod să le folosești.

Să presupunem că avem o listă de culori:

@list-red: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c;

De exemplu, să creăm o clasă pentru fiecare culoare:

Generator de culori(@index: 1, @color) când (@index Faceți clic pe „+” în partea de jos a ferestrei și selectați tipul de fișier pentru a urmări mai puțin. acest moment, dacă totul a fost făcut corect, atunci chiar și cu setările implicite IDE-ul nostru va monitoriza mai puține fișiere din proiect și le va compila în timp real când se schimbă și le va plasa într-un folder lângă fișierul sursă compilat. Principalul lucru este să vă asigurați că în câmpul Program este specificată calea către compilatorul less (pe care l-am instalat în consolă).

Lucrul cu LESS

În sfârșit, să ne distrăm puțin și să începem să scriem LESS cod. După cum veți vedea, codul este ușor de citit și de înțeles, deoarece sintaxa este foarte asemănătoare cu css-ul obișnuit, ceea ce reduce bariera de intrare pentru ca un dezvoltator să-l folosească.

Variabilele din LESS funcționează în același mod ca în PHP, JS și majoritatea altor limbaje de programare. Le puteți folosi pentru a stoca o valoare și apoi utilizați variabile în locul valorii în sine ori de câte ori aveți nevoie.

@header-font: Georgia ; h1 , h2 , h3 , h4 (familie de fonturi: @header-font; ) .large (familie de fonturi:@header-font; )

În exemplul de mai sus, declarăm variabila @header-font și îi scriem valoarea „Georgia”. Acum putem folosi această variabilă ori de câte ori dorim să instalăm fontul Georgia. Dacă decidem că Trebuchet MS este mai potrivit pentru anteturile noastre, atunci nu va trebui să ne uităm prin întregul fișier, pur și simplu vom schimba valoarea variabilei.
Am găsit o utilizare excelentă pentru variabile în definirea culorilor site-ului. În vremurile bune (care nu au fost cu mult timp în urmă) am folosit ceva de genul acesta:

/* Culori pentru site-ul meu #ff9900 - Portocaliu - folosit pentru link-uri și elemente evidențiate #cccccc - Gri deschis - folosit pentru chenare #333333 - Negru închis - Folosit pentru fundaluri închise și culoarea textului titlului #454545 - Negru mijlociu - Folosit pentru textul general culoare */ corp ( fundal : #333333 ; culoare : #454545 ; ) a ( culoare : #ff9900 ; ) culoare : #333333 ; )

Nu este nimic în neregulă în a-ți documenta culorile astfel, este bun antrenament, problema este că documentația nu are nimic de-a face cu funcționalitatea stilurilor tale. Dacă decideți să schimbați culorile după linia 2000 de cod și apoi vă răzgândiți la linia 3567, va fi extrem de dificil să corectați toate culorile și documentația.
Cu LESS ne putem modifica și documenta fluxul de lucru în același timp.

/* Culori pentru site-ul meu */ @color-orange: #ff9900 ; @color-gray_light: #cccccc ; @color-black_dark: #333333 ; @color-black_medium: #454545 ; corp ( fundal: @color-black_dark; culoare: @color-black_medium; ) a ( culoare :@color-orange; ) h1 , h2 , h3 , h4 , h5 , h6 (culoare: @color-black_dark; ) Domeniu variabil

Sfera variabilelor descrie locurile în care sunt accesibile. Dacă definiți o variabilă chiar la începutul fișierului LESS, atunci aceasta va fi disponibilă pentru orice cod scris după aceasta.
De asemenea, puteți defini o variabilă în interiorul unei reguli CSS. În acest caz, variabilele nu vor fi disponibile în afara acestei reguli, pot fi utilizate local.

un buton ( @culoare : #ff9900 ; culoare :@culoare; ) ( fundal : @culoare; )

În acest exemplu, LESS nu va fi convertit din cauza erorii @color nu este definită pentru utilizare în interiorul unui element buton. Dacă o variabilă este declarată în afara unui element și în interiorul altui element, atunci va fi accesibilă doar local.

@culoare: #222222 ; un buton ( @color : #ffffff ; culoare :@color; ) ( fundal : @color; ) Variabile din variabile

Dacă ați codat în PHP, atunci știți că puteți declara un nume de variabilă într-o altă variabilă.

@color-chirstmas_red: #941 f1f ; @name-of-color: "culoare-roșu_de-crăciun" ; culoare : @@numele-culorii ;

Personal, nu folosesc atât de mult, deoarece variabilele din variabile sunt aproape inutile fără închideri, dar sunt sigur că vor exista exemple inteligente de utilizare.

Constante și variabile

Este important să rețineți că, spre deosebire de ceea ce tocmai ați citit, variabilele din LESS sunt mai mult ca constante. Aceasta înseamnă că ele, spre deosebire de variabile, pot fi definite o singură dată.

Operațiuni

Puteți obține un control incredibil de precis folosind operațiuni în LESS. Ideea este simpla:

.button ( @unitate : 3 px; chenar :@unitate solid #ddd ; umplutură : @unitate * 3 ; margine : @unitate * 2 ; )

Codul de mai sus setează variabila @unit la 3px. Apoi setăm această valoare la lățimea chenarului, umplutura la trei ori această lățime și marginea la de două ori această lățime.
Puteți folosi operații de înmulțire, împărțire, adunare și scădere. Pentru a crea un bloc cu un chenar care mărește lățimea laturilor în sensul acelor de ceasornic, puteți folosi următorul cod:

.box ( @base_unit : 1 px; chenar : @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3 ) Gestionarea culorilor

Caracteristica mea preferată a LESS este gestionarea culorilor. Puteți folosi operațiuni pentru a amesteca culorile și mai multe funcții speciale pentru a lucra cu culoarea.

Operații de culoare

Dacă doriți să schimbați valoarea unei culori, puteți face acest lucru scăzând sau adăugând o altă culoare.

@culoare: #941 f1f ; buton ( fundal : #941f1f + #222222 ; chenar : #941f1f - #111111 ; )

Operația de fundal de mai sus va crește fiecare valoare HEX cu 2. Rezultatul va fi „B64141” - o versiune mai deschisă a culorii originale. Operația cadru va reduce fiecare valoare HEX cu 1 și va produce mai mult culoare inchisa: „830E0E”.
În practică, sunt multe cazuri când începem cu culoarea de bazăși avem nevoie de o versiune ușor întunecată sau luminată a acesteia.

@buton-culoare: #d24444 ; input .submit (culoare :#fff ; fundal :@color-button; chenar :1 px solid @color-button - #222 ; padding :5 px 12 px; ) Funcții de culoare

Există multe mai multe posibilități de lucru cu culoarea; LESS vă permite să le manipulați nivelul link-ului. Puteți deschide, închide, satura, desatura și roti culorile. Aruncă o privire la următoarele exemple cu imagini pentru a înțelege ce face fiecare.

@culoare: #3 d82d1 ; .left_box ( background :lighten(@culoare, 20%) ; ) .right_box ( background :darken(@color, 20%) ; ) Imbricare

Când scriem CSS, folosim stiluri în cascadă. Pentru a modifica marginile unui paragraf numai în interiorul unui articol, puteți folosi următorul cod:

articol .post p ( marja : 0 0 12 px 0 ; )

Nu este nimic greșit în această abordare, dar dacă trebuie să schimbăm și stilul linkurilor, citatelor, titlurilor etc. numai în cadrul unui articol, va trebui să utilizați prefixul „articol.post” pentru fiecare element. Acest lucru face scrierea codului mai plictisitoare și mai greu de citit.
În LESS putem încadra aceste reguli, oferindu-ne o versiune mai scurtă și mai logică a stilurilor noastre. De exemplu:

Articol.post ( p( margine: 0 0 12px 0; ) a ( culoare: roșu; ) a:hover ( culoare: albastru; ) img ( float:left; ) )

Indentarea nu este necesară, dar face codul mai lizibil. Nivelurile de cuibărire nu sunt limitate.

A ( culoare: roșu; ) p ( margine: 0px; ) articol ( a ( culoare: verde; ) p ( culoare: #555; a ( culoare: albastru; ) ) )

Mixine

Mixinurile din LESS vă vor scuti de la introducerea unui cod inutil. Ați trebuit vreodată să creați cadru rotunjitîn care doar colțurile de sus sunt rotunjite?

.tab ( -webkit-border-sus-stânga-rază: 6 px; -webkit-border-sus-dreapta-rază: 6 px; -moz-border-radius-topleft: 6 px; -moz-border-radius- sus-dreapta: 6 px;

Și așa de fiecare dată... Cu LESS, toate acestea pot fi schimbate prin crearea unui mixin. Impuritățile sunt elemente reutilizabile care pot fi adăugate la orice element de regulă. Și nici măcar nu trebuie să înveți o nouă sintaxă.

Rounded_top ( -webkit-border-sus-stânga-raza: 6px; -webkit-border-sus-dreapta-raza: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; chenar-sus-stânga-rază: 6px; chenar-sus-dreapta-rază: 6px ) .tab ( fundal: #333; culoare: #fff; .rounded_top; ) .submit ( .rounded_top; )

În codul de mai sus, am definit un element .rounded_top pentru a rotunji colțurile de sus. Când îl adăugăm la orice alt element ca mixin (vezi .tab) importăm în esență regulile pe care le-am creat pentru el. Datorită acestei sintaxe, putem folosi orice element ca mixin.

Stilurile pentru elementul .submit sunt colțuri rotunjite în partea de sus, culoare albași fundal roșu (valoarea #333 înlocuită).

Mixine cu parametri

În timp ce mixurile de parametri sună complicat, ele rezolvă problema într-un mod foarte simplu. În exemplele de mai sus, ați văzut cum putem defini un element cu o rază de 6px în colțurile de sus. Ce se întâmplă dacă vrem să creăm un element cu o rază de 3px? Ar trebui să declarăm mixuri diferite pentru toate valorile pixelilor? Bineînțeles că răspunsul este nu, trebuie să folosim mixin-uri cu parametri!
Sunt similare cu funcțiile, deoarece pot schimba valori atunci când sunt apelate. Să rescriem exemplul cu bord-radius pentru a vedea cum funcționează.

Rounded_top(@radius) ( -webkit-border-top-left-radius: @radius; -webkit-border-sus-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border -radius-topright: @radius-sus-stânga-raza: @radius-sus-dreapta-rază: @radius (fund: #fff; .rounded_top(6px); ) .submit ( .rounded_top(3px); )

În codul de mai sus, raza elementului .tab este de 6px, iar elementul .submit va avea o valoare de 3px.

Valori standard

Dacă utilizați de obicei aceeași rază de margine, dar uneori aveți nevoie de una diferită, trebuie să setați mixin-ul la o valoare standard.

Rounded_top(@radius:6px) ( -webkit-border-sus-stânga-rază: @radius; -webkit-border-sus-dreapta-rază: @radius; -moz-border-radius-topleft: @radius; -moz -border-radius-topright: @radius-sus-stânga-radius: @radius-sus-dreapta-rază: @radius ( fundal: #fff; .rounded_top; ). trimite ( .rounded_top(3px); )

În acest exemplu, .tab va primi valoarea implicită de 6px, iar .submit va primi valoarea implicită de 3px.

Opțiuni multiple

De asemenea, puteți utiliza mai mulți parametri pentru a identifica impurități mai complexe.

Radius(@radius:6px) ( -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; ) .button(@radius:3px, @background: #e7ba64, @padding: 4px) ( .radius(@radius); fundal:@background; chenar: 1px solid @background - #222; padding: @padding; ) .read_more ( .button(0px); )

În acest exemplu, class.read_more este formatat cu umplutură de 4px, culoare de fundal#e7ba64 și cu o rază-chenar de 0px.

Folosind toate argumentele deodată

O altă opțiune atunci când utilizați argumente este să le combinați. Proprietățile scurte în CSS au mai multe valori scrise una după alta.

div ( chenar : 1 px solid #bbb ; )

Pentru a da tuturor elementelor necesare un chenar gri, puteți utiliza această funcție:

Gray_border(@width: 1px, @type: solid, @color: #bbb)( border:@arguments; ) div ( .gray_border(2px, point); )

@arguments este un cuvânt cheie special care afișează toți parametrii unul câte unul într-o ordine dată. Rezultatul codului LESS de mai sus va fi:

div ( chenar :2 px întrerupt #bbb ; ) Mixuri parametrice fără parametri

De asemenea, puteți utiliza mixin-uri parametrice fără parametri. Acesta este folosit atunci când nu trebuie să scoateți un mixin în CSS, dar doriți ca regulile acestuia să se aplice elementului în care este folosit.

Alertă ( fundal: roșu; culoare: alb; umplutură: 5px 12px; ) .error_message ( .alert; margine: 0 0 12px 0; )

CSS-ul codului de mai sus va fi astfel:

.alert ( fundal : roșu; culoare : alb; umplutură : 5 px 12 px; ) . error_message ( fundal : roșu; culoare : alb; umplutură : 5 px 12 px; margine : 0 0 12 px 0 ; )

Pentru a ascunde clasa .alert trebuie să setați parametrul la gol.

Alert() ( fundal: roșu; culoare: alb; umplutură: 5px 12px; ) .error_message ( .alert; margine: 0 0 12px 0; )

CSS-ul terminat va arăta astfel:

.error_message ( fundal: roșu; culoare: alb; umplutură: 5 px 12 px; margine: 0 0 12 px 0 ; )

Acesta este folosit în principal pentru a reduce Dimensiunea CSS fişier.

Spațiu de nume

Spațiile de nume în limbaje de programare sunt de obicei folosite pentru a grupa elemente cu funcționalitate similară. Putem realiza ceva similar în LESS combinând codul nostru cu mixin-uri.

#my_framework ( p ( marja: 12px 0; ) a ( culoare: albastru; text-decor: niciunul; ) .submit ( fundal: roșu; culoare: alb; umplutură: 5px 12px; ) )

Când începeți să lucrați pe un site nou bazat pe cadrul dvs., puteți adăuga linkul #my_framework și îl puteți utiliza fără a înfunda spațiul de nume.

Butonul_trimite ( #cadru_meu > .trimite; )

Aceasta este, de asemenea, o modalitate excelentă de a face posibilă schimbarea și rafinarea rapidă a temelor. Dacă dezvoltați mai multe teme pentru compania dvs., atunci pentru a schimba șabloanele din mers, le puteți pune pe toate într-un singur fișier LESS folosind pachete.

#fw_1 ( p ( marja: 12px 0; ) a ( culoare: albastru; text-decor: niciunul; ) .submit ( fundal: roșu; culoare: alb; umplutură: 5px 12px; ) ) #fw_2 ( p ( marja: 8px 0; ) a ( culoare: roșu; text-decor: subliniat; ) .submit ( fundal: albastru; culoare: alb; padding: 8px 20px; ) ) .submit_button ( #fw_2 > .submit; )

Ca rezultat, avem ocazia de a accelera scrierea layout-ului proiectului nostru folosind mix-uri pre-preparate ale noastre sau cadrul. Mai mult, folosind mai puțin - lizibilitatea, structura și logica stilurilor tale crește cu un ordin de mărime, ceea ce va îmbunătăți suportul site-ului în viitor.