| MÉNĚ | |
|---|---|
| Jazyková třída | Jazyk stylů , svobodný software , preprocesor a knihovna funkcí |
| Objevil se v | 2009 |
| Autor | Alexis Sellier |
| Vývojář | Alexis Sellier, Dmitrij Fadějev |
| Uvolnění | 4.1.3 ( 9. června 2022 ) |
| Typový systém | dynamický |
| Byl ovlivněn | CSS , Sass |
| ovlivnil | Sass , Less Framework |
| Licence | Licence Apache 2 |
| webová stránka | lesscss.org |
| OS | multiplatformní |
LESS (Leaner Style Sheets, kompaktní stylový list) je dynamický stylový jazyk vyvinutý Alexisem Sellierem. Byl ovlivněn jazykem stylu Sass a následně ovlivnil jeho novou syntaxi „SCSS“, která také používá syntaxi, která je rozšířením CSS [1] .
LESS je produkt s otevřeným zdrojovým kódem . Jeho první verze byla napsána v Ruby , ale v pozdějších verzích bylo rozhodnuto opustit používání tohoto programovacího jazyka ve prospěch JavaScriptu . Less je vnořený metajazyk : platný CSS by byl platným programem less s podobnou sémantikou .
LESS poskytuje následující rozšíření CSS: proměnné , vnořené bloky, mixiny , operátory a funkce [2] .
LESS může běžet na straně klienta ( Internet Explorer 6+ , WebKit , Firefox ) nebo na straně serveru s Node.js nebo Rhino [2] .
Méně umožňuje používat proměnné. Před názvem proměnné je znak @ . Dvojtečka (:) se používá jako přiřazovací znak .
Při překladu se hodnota proměnné dosadí do výsledného CSS dokumentu [2] .
@ barva : # 4D926F ; # záhlaví { barva : @ barva ; } h2 { barva : @ barva ; }Tento kód LESS bude zkompilován do následujícího souboru CSS:
# záhlaví { barva : #4D926F ; } h2 { barva : #4D926F ; }Mixiny vám umožňují zahrnout celou sadu vlastností z jedné sady pravidel do druhé tím, že zahrnete název třídy jako jednu z vlastností jiné třídy. Toto chování lze považovat za jakousi konstantu nebo proměnnou. Mohou se také chovat jako funkce pomocí argumentů. V čistém CSS by se měl opakující se kód opakovat na více místech – mixiny činí kód čistším, přehlednějším a snadněji se mění [2] .
. zaoblené rohy ( @ radius : 4px ) { -webkit-border-radius : @ radius ; -moz-border-radius : @ radius ; border-radius : @ radius ; } # header { .zaoblene rohy ; } # patička { .zaoblené rohy(10px) ; }Tento kód LESS bude zkompilován do následujícího souboru CSS:
# header { -webkit- border-radius : 4 px ; -moz- border-radius : 4 px ; okraj - poloměr : 4px } # patička { -webkit- border-radius : 10 px ; -moz- border-radius : 10 px ; okraj – poloměr : 10px }LESS umožňuje vnořovat definice namísto kaskádování nebo spolu s ním. Řekněme například, že máme tento CSS: CSS podporuje logické kaskádování, ale jeden blok kódu nelze vnořit do druhého. Méně umožňuje vnořit jeden selektor do druhého. Tím se zpřehlední dědičnost a zkrátí se styly [2] .
# header { h1 { font-size : 26 px ; váha písma : tučné ; } p { font-velikost : 12 px ; a { text-decoration : none ; &:hover { border -width : 1px } } } }Tento kód LESS bude zkompilován do následujícího souboru CSS:
# header h1 { font-size : 26 px ; váha písma : tučné ; } # header p { font-size : 12 px ; } # header p a { text-decoration : none ; } # header p a : hover { border-width : 1 px ; }Méně umožňuje používat operace a funkce. Operace umožňují sčítat, odečítat, dělit a násobit hodnoty vlastností a barev, které lze použít k vytvoření složitých vztahů mezi vlastnostmi. Funkce jsou mapovány jedna ku jedné do kódu JavaScript, což umožňuje zpracování hodnot.
@ the-border : 1px ; @ základní barva : # 111 ; @ červená : # 842210 ; # header { color : @ base-color * 3 ; border-left : @ the-border ; border-right : @ the-border * 2 ; } # footer { color : @ base-color + #003300 ; border-color : desaturate ( @ červená , 10 % ); }Tento kód LESS bude zkompilován do následujícího souboru CSS:
# záhlaví { barva : #333 ; ohraničení - vlevo : 1px ohraničení - vpravo : 2px } # pata { barva : #114411 ; border-color : #7d2717 ; }Sass i LESS jsou CSS preprocesory, které umožňují psát čisté CSS pomocí programovacích konstrukcí namísto statických pravidel [3] .
LESS je inspirován Sass [4] . Sass byl navržen tak, aby zjednodušil i rozšířil CSS, v prvních verzích byly ze syntaxe odstraněny složené závorky (tato syntaxe se nazývá sass ). LESS je navržen tak, aby byl co nejblíže CSS, takže mají stejnou syntaxi. Výsledkem je, že existující CSS lze použít jako MÉNĚ kódu. Novější verze Sass také obsahují syntaxi podobnou CSS nazvanou SCSS (Sassy CSS) [1] .
Viz Sass/Less Comparison [5] pro podrobné srovnání syntaxe .
ZUSS ( ZK User-Interface Style Sheet) [6] je stylovací jazyk založený na myšlenkách LESS. Má podobnou syntaxi, kromě toho, že je určen k použití na straně serveru spolu s programovacím jazykem Java . Nepoužívá interpret JavaScript ( Rhino ), ale umožňuje přímo volat metody Java.
LESS lze na webových stránkách použít různými způsoby. Jednou z možností je připojit soubor JavaScript less.js z jeho oficiální stránky lesscss.org k webové stránce a převést kód do CSS za běhu pomocí prohlížeče.
To se provádí například pomocí následujícího html kódu:
< link rel = "stylesheet/less" type = "text/css" href = "styles.less" > < script src = "less.js" type = "text/javascript" ></ skript >Pokud používáte Rhino JavaScript na straně serveru nebo node.js , můžete soubory .less převést na .css na straně serveru.
Konečně existují implementace jazyka třetích stran: například SimpLESS open source kompilátor pro Windows , Linux a Mac OS X [7] , .less{} – implementace pro framework .NET [8] nebo lessphp [9 ] , což vám umožňuje kompilovat méně stylů na straně serveru pro stránky PHP .
| Jazyky šablon stylů ( porovnat , seznam ) | |
|---|---|
| Režimy |
|
| Standard | |
| nestandardní | |