| MAI PUȚIN | |
|---|---|
| Clasa de limba | Limbajul foii de stil , software gratuit , preprocesor și bibliotecă de funcții |
| Aparut in | 2009 |
| Autor | Alexis Sellier |
| Dezvoltator | Alexis Sellier, Dmitri Fadeev |
| Eliberare | 4.1.3 ( 9 iunie 2022 ) |
| Tip sistem | dinamic |
| A fost influențat | CSS , Sass |
| influențat | Sass , mai puțin cadru |
| Licență | Licența Apache 2 |
| Site-ul web | lesscss.org |
| OS | multiplatformă |
LESS (Leaner Style Sheets, compact style sheet) este un limbaj de stil dinamic dezvoltat de Alexis Sellier. A fost influențat de limbajul de stil Sass și, la rândul său, a influențat noua sa sintaxă „SCSS”, care folosește și o sintaxă care este o extensie a CSS [1] .
LESS este un produs open source . Prima sa versiune a fost scrisă în Ruby , dar în versiunile ulterioare sa decis să renunțe la utilizarea acestui limbaj de programare în favoarea JavaScript . Less este un metalimbaj imbricat : CSS valid ar fi un program less valid cu o semantică similară .
LESS oferă următoarele extensii CSS: variabile , blocuri imbricate, mixin -uri , operatori și funcții [2] .
LESS poate rula partea client ( Internet Explorer 6+ , WebKit , Firefox ) sau partea server care rulează Node.js sau Rhino [2] .
Less vă permite să utilizați variabile. Numele variabilei este precedat de simbolul @ . Coloana (:) este folosită ca semn de atribuire .
La traducere, valoarea variabilei este substituită în documentul CSS rezultat [2] .
@ culoare : # 4D926F ; # header { culoare : @ culoare ; } h2 { culoare : @ culoare ; }Acest cod LESS va fi compilat în următorul fișier CSS:
# antet { culoare : #4D926F ; } h2 { culoare : #4D926F ; }Mixinurile vă permit să includeți un întreg set de proprietăți dintr-un set de reguli în altul prin includerea numelui unei clase ca una dintre proprietățile altei clase. Acest comportament poate fi considerat ca un fel de constantă sau variabilă. De asemenea, se pot comporta ca niște funcții luând argumente. În CSS pur, codul repetat ar trebui repetat în mai multe locuri - mixurile fac codul mai curat, mai clar și mai ușor de schimbat [2] .
. colțuri rotunjite ( @ radius : 4px ) { -webkit-border-radius : @ radius ; -moz-border-radius : @ radius ; border-radius : @ rază ; } # antet { .rounded-corners ; } # subsol { .rounded-corners(10px) ; }Acest cod LESS va fi compilat în următorul fișier CSS:
# antet { -webkit- border-radius : 4 px ; -moz- border-radius : 4 px ; chenar - raza : 4px } # subsol { -webkit- border-radius : 10 px ; -moz- border-radius : 10 px ; chenar - raza : 10px }LESS face posibilă imbricarea definițiilor în loc de sau împreună cu cascada. De exemplu, să presupunem că avem acest CSS: CSS acceptă cascada logică, dar un bloc de cod nu poate fi imbricat în altul. Less vă permite să plasați un selector în altul. Acest lucru face moștenirea mai clară și scurtează foile de stil [2] .
# header { h1 { font-size : 26 px ; greutate font : bold ; } p { dimensiunea fontului : 12 px ; a { text-decoration : none ; &:hover { border -width : 1px } } } }Acest cod LESS va fi compilat în următorul fișier CSS:
# antet h1 { dimensiunea fontului : 26 px ; greutate font : bold ; } # header p { font-size : 12 px ; } # header p a { text-decoration : none ; } # antet p a : hover { border-width : 1 px ; }Less vă permite să utilizați operațiuni și funcții. Operațiile vă permit să adăugați, să scădeți, să împărțiți și să înmulțiți valorile proprietăților și culorilor, care pot fi folosite pentru a crea relații complexe între proprietăți. Funcțiile sunt mapate unu-la-unu la codul JavaScript, permițând procesarea valorilor.
@ chenarul : 1px ; @ culoare de bază : # 111 ; @ roșu : # 842210 ; # header { culoare : @ culoare de bază * 3 ; border-left : @ the-border ; border-right : @ the-border * 2 ; } # subsol { culoare : @ culoare de bază + #003300 ; border-color : desaturat ( @ roșu , 10 % ); }Acest cod LESS va fi compilat în următorul fișier CSS:
# antet { culoare : #333 ; chenar - stânga : 1px chenar - dreapta : 2px } # subsol { culoare : #114411 ; culoare-chenar : #7d2717 ; }Atât Sass , cât și LESS sunt preprocesoare CSS care vă permit să scrieți CSS curat folosind constructe de programare în loc de reguli statice [3] .
LESS este inspirat de Sass [4] . Sass a fost conceput atât pentru a simplifica, cât și pentru a extinde CSS, acoladele au fost eliminate din sintaxă în primele versiuni (această sintaxă se numește sass ). LESS este conceput pentru a fi cât mai aproape de CSS posibil, astfel încât au aceeași sintaxă. Ca rezultat, CSS existent poate fi folosit ca cod LESS. Versiunile mai noi de Sass includ, de asemenea, o sintaxă asemănătoare CSS numită SCSS (Sassy CSS) [1] .
Consultați Comparația Sass/Less [5] pentru o comparație detaliată a sintaxelor .
ZUSS ( ZK User-interface Style Sheet) [6] este un limbaj de stil bazat pe ideile LESS. Are o sintaxă similară, cu excepția faptului că este destinat să fie utilizat pe partea de server împreună cu limbajul de programare Java . Nu folosește un interpret JavaScript ( Rhino ), dar vă permite să apelați direct metode Java.
LESS poate fi folosit pe un site web într-o varietate de moduri. O opțiune este să conectați fișierul JavaScript less.js de pe site-ul său oficial lesscss.org la pagina web pentru a converti codul în CSS din mers, folosind browserul.
Acest lucru se face, de exemplu, folosind următorul cod html:
< link rel = "stylesheet/less" type = "text/css" href = "styles.less" > < script src = "less.js" type = "text/javascript" ></ script >Dacă utilizați JavaScript de la nivelul serverului Rhino sau node.js , puteți converti fișierele .less în .css pe partea de server.
În cele din urmă, există implementări ale limbajului de la terți: de exemplu, compilatorul SimplLESS open source pentru Windows , Linux și Mac OS X [7] , .less{} - o implementare pentru framework-ul .NET [8] sau lessphp [9 ] , care vă permite să compilați mai puține stiluri pe partea de server pentru site-urile PHP .
| Limbi pentru foile de stil ( compara , list ) | |
|---|---|
| Moduri |
|
| Standard | |
| non-standard |
|