MAI PUȚIN

Less ( LESS ) este un preprocesor CSS care extinde limbajul CSS normal permițând (pe lângă sintaxa normală a foilor de stil) și utilizarea funcțiilor , operatorilor și variabilelor , cuibărirea instrucțiunilor, crearea „mixinelor” și numeroase alte caracteristici care fac codul mai ușor de scris, întreținut și înțeles.

LESS este open source și este scris în JavaScript .

Operațiune

LESS prevede că instrucțiunile css sunt conținute într-un fișier .less, care va avea atât caracteristicile sintactice comune ale CSS, cât și instrucțiunile specifice LESS. Acest fișier poate fi utilizat în două moduri:

prin includerea fișierului .less direct în pagina HTML împreună cu un script Javascript (numit less.js , descărcabil de pe site-ul oficial) care, atunci când browserul redă pagina, se va ocupa de analiză prin compilarea codului css care va fi automat inserat în eticheta <head> </head> a documentului html.
incluzând în pagina HTML fișierul .css compilat, generat de un program terț care se ocupă de analiza fișierului .less.

Caracteristici

Variabile

Variabilele funcționează la fel ca în limbajele de programare normale. Ele pot fi definite prin simbolul @.

De exemplu, următorul cod:

 @red : # ff0000 ;
 
 o { color : @ red }
 h1 { border-color : @ red ;}
 puternic { background-color : @ red ;}

va avea ca rezultat acest CSS compilat:

 a { color : # ff0000 }
 h1 { border-color : # ff0000 ;}
 puternic { background-color : # ff0000 ;}

Utilizarea variabilelor este foarte utilă deoarece vă permite să schimbați toate aparițiile unei anumite valori (de exemplu, un cod de culoare hexazecimal , o valoare a pixelilor , un font etc.) dintr-o singură dată. 'Întregul fișier LESS.

Cuibărit

În LESS este posibil să cuibărim instrucțiuni, făcând codul mai compact, concis și mai ușor de citit.

Linia ierarhică a selectorilor va urmări structura listării: inserarea unui selector între instrucțiunile unui alt selector va face din acel selector copilul selectorului care îl conține.

De exemplu, acest set de instrucțiuni:

 div {
    lățime : 200 px ;
    p {
       dimensiunea fontului : 20 px ;
       puternic {
          culoare : albastru ;
          decorare text : subliniat ;
       }
    }
 }

va genera următoarele CSS compilate:

 div {
    lățime : 200 px ;
 }
 
 div p {
    dimensiunea fontului : 20 px ;
 }
 
 div p puternic {
    culoare : albastru ;
    decorare text : subliniat ;
 }

Mixin

Mixinele sunt „seturi de instrucțiuni” care pot fi apelate în proprietățile oricărui selector. Orice clasă sau id poate fi folosit ca mixin. Dacă doriți să definiți un mixin fără ca acesta să apară ca o ieșire în CSS compilat, amânați doar o pereche de paranteze rotunde () când mixinul este definit.

Clasa sau id ca mixin

Cod MICI:

 . mixin {
    culoare : roșu ;
    font-weight : bold ;
 }
 
 p {
    dimensiunea fontului : 18 px ;
    .mixină ;
 }

CSS compilat:

 . mixin {
    culoare : roșu ;
    font-weight : bold ;
 }
 
 p {
    dimensiunea fontului : 18 px ;
    culoare : roșu ;
    font-weight : bold ;
 }

Mixin exclus din ieșire

Cod MICI:

 . mixin () {
    culoare : roșu ;
    font-weight : bold ;
 }
 
 p {
    dimensiunea fontului : 18 px ;
    .mixină ;
 }

CSS compilat:

 p {
    dimensiunea fontului : 18 px ;
    culoare : roșu ;
    font-weight : bold ;
 }

Operatori

LESS vă permite să efectuați operații aritmetice prin inserarea valorilor între paranteze rotunde. Acest lucru este foarte util atunci când este combinat cu posibilitățile oferite de variabile.

De exemplu:

 @var : 200px ;
 
 div {
    lățime : ( @ var + 20 px );
 }

Acesta va genera:

 div {
    lățime : 220 px ;
 }

Comparaţie

Sass

Atât Sass, cât și Less sunt preprocesoare CSS, care vă permit să scrieți CSS curat într-o construcție de programare în loc de reguli statice ^[1] .

Mai puțin este inspirat de Sass ^[2] ^[3] . Sass a fost conceput atât pentru simplificarea, cât și pentru extinderea CSS, astfel încât elemente precum parantezele buclate au fost eliminate din sintaxă. Less a fost conceput pentru a fi cât mai aproape de CSS și, ca rezultat, CSS existent poate fi folosit ca cod Less valid ^[4] .

Versiunile mai noi ale Sass au introdus, de asemenea, o sintaxă de tip CSS numită SCSS (Sassy CSS).

Utilizare pe site-uri

Mai puține se pot aplica site-urilor în mai multe moduri. O opțiune este de a include fișierul JavaScript less.js pentru a converti codul din mers. Browserul redă apoi ieșirea CSS. O altă opțiune este de a face codul mai mic CSS pur și de a încărca CSS pe un site. Cu această opțiune nu sunt încărcate fișiere .less, iar site-ul nu are nevoie de convertorul JavaScript less.js.

Software mai puțin

Nume	Descriere	Licență software	platformă	Funcționalitate
WinLess	Mai puțin compilator GUI	Apache 2.0 ^[5]	Windows	Compilator
Crunch	Mai puțin editor și compilator (necesită Adobe AIR)	GPL ^[6]	Windows, Mac OS X	Editor compilator
less.js-windows	Utilitar simplu pentru linia de comandă pentru Windows care va compila fișiere * .less în CSS folosind less.js.	Licență MIT ^[7]	Windows	Compilator
mai puțin.app	Mai puțin compilator	Proprietar	Mac OS X	Compilator
CodeKit	Mai puțin compilator	Proprietar	Mac OS X	Compilator
LessEngine	Mai puțin compilator	Liber	Plugin OpenCart	Compilator
SIMPLESS	Mai puțin compilator	licență gratuită, dar fără licență explicită ^[8]	Windows Mac OS X Linux	Compilator
Vesel	Mai puțin compilator	Ms-PL ^[9]	Plugin Visual Studio	Compilator
Mindscape Web Workbench	Evidențierea sintaxei și IntelliSense pentru mai puțin și Sass	Proprietar	Plugin Visual Studio	Evidențierea sintaxei compilatorului
Eclipse Plugin pentru mai puțin	Plugin Eclipse	EPL 1.0	Plugin Eclipse	Compilator de evidențiere a sintaxei asistență de conținut
mod_less	Modulul Apache2 pentru a compila Mai puțin din mers	Sursa deschisa	Linux	Compilator
grunt-contrib-less	Sarcina Node.js Grunt pentru a converti Less în CSS	Sursa deschisa	Node.js	Compilator
Web Essentials	Extensie Visual Studio cu suport pentru Less și Sass	Apache 2.0	Windows	Evidențierea sintaxei, asistența conținutului, compilatorul
orar	Compilator pur C ++	GPL	cel puțin Windows, Linux, MacOS	Compilator
Mai puțin WebCompiler	Compilator bazat pe web	MIT	cel puțin Windows, Linux, MacOS	Compiler, Evidențierea sintaxei, Minifier

Notă

^ Ce este greșit cu CSS Ce este greșit cu CSS
^ Despre Mai puțin Despre
^ Sass and Less. Arhivat 21 iunie 2009 la Internet Archive . Sass și mai puțin
^ Comparație Sass / Less
^ [1] WinLess github Issue "License Information"
^ Crunch's LICENSE.txt la github Crunch's LICENSE.txt la github
^ [2] licență github
^ [3] fișier licență la github (substituent)
^ [4] Informații despre licența Chirpy la CodePlex

linkuri externe

Site-ul oficial , pe lesscss.org .
Depozit de surse LESS , la github.com .
Compiler pentru Mac OSX (nu mai este actualizat) , la download.cnet.com .

Portal IT : accesați intrările Wikipedia care se ocupă cu IT

[whats-wrong-with-css-1] Ce este greșit cu CSS Ce este greșit cu CSS

[about-2] Despre Mai puțin Despre

[compare-3] Sass and Less. Arhivat 21 iunie 2009 la Internet Archive . Sass și mai puțin

[4] Comparație Sass / Less

[5] [1] WinLess github Issue "License Information"

[6] Crunch's LICENSE.txt la github Crunch's LICENSE.txt la github

[7] [2] licență github

[8] [3] fișier licență la github (substituent)

[9] [4] Informații despre licența Chirpy la CodePlex

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]