Méně (jazyk šablony stylů) - Less (stylesheet language)

Méně

Navrhl	Alexis Sellier
Vývojář	Alexis Sellier, Dmitrij Fadeyev
Poprvé se objevil	2009; Před 11 lety (2009)
Stabilní uvolnění	3.9.0[1] / 28. listopadu 2018; Před 2 roky (2018-11-28)
Psací disciplína	Dynamický
Jazyk implementace	JavaScript
OS	Cross-platform
Licence	Licence Apache 2.0
Přípony názvu souboru	.méně
webová stránka	méně.org
Ovlivněno
CSS, Sass
Ovlivněno
Sass Méně rámce, Bootstrap (v3)

Méně (Štíhle stylové listy; někdy stylizované jako MÉNĚ) je dynamický preprocesor jazyk šablony stylů které lze sestavit Kaskádové styly (CSS) a běží na straně klienta nebo na straně serveru.^[2]Méně, kterou navrhla Alexis Sellier, je ovlivněna Sass a ovlivnil novější "SCSS" syntaxi Sass, která přizpůsobila svou syntaxi formátování bloku podobnou CSS.^[3] Méně je otevřený zdroj. Jeho první verze byla napsána v Rubín; v pozdějších verzích však použití Ruby bylo zastaralé a nahrazeno JavaScript. Odsazená syntaxe Less je a vnořený metajazyk, protože platný CSS je platný Méně kódu se stejným sémantika. Less poskytuje následující mechanismy: proměnné, hnízdění, mixiny, operátory a funkce; hlavní rozdíl mezi Less a jinými předkompilátory CSS spočívá v tom, že Less umožňuje kompilaci v reálném čase přes less.js prohlížečem.^[2][4]

Funkce

Proměnné

Méně umožňuje definovat proměnné. Proměnné v Méně jsou definovány pomocí zavináč (@). Variabilní úkol se provádí s dvojtečka (:).

Během překladu jsou hodnoty proměnných vloženy do výstupního dokumentu CSS.^[2]

@bledý-zelená barva: #4D926F;#záhlaví {  barva: @světle zelená barva;}h2 {  barva: @světle zelená barva;}

Výše uvedený kód v Less by se zkompiloval do následujícího kódu CSS.

#záhlaví {  barva: # 4D926F;}h2 {  barva: # 4D926F;}

Mixiny

Mixins umožňuje vložit všechny vlastnosti třídy do jiné třídy tak, že jako jednu z jejích vlastností uvedete název třídy, čímž se budete chovat jako druh konstantní nebo variabilní. Mohou se také chovat jako funkce a přijímat argumenty. CSS nepodporuje Mixins: Jakýkoli opakovaný kód musí být opakován na každém místě. Mixins umožňuje efektivnější a čistší opakování kódu, stejně jako snazší změnu kódu.^[2]

.zaoblené rohy (@poloměr: 5px 10px 8px 2px) {  -webkit-poloměr ohraničení: @poloměr;  -moz-poloměr ohraničení: @poloměr;  poloměr ohraničení: @poloměr;}#záhlaví {  .zaoblené rohy;}#zápatí {  . zaoblené rohy (10px 25px 35px 0px);}

Výše uvedený kód v Less by se zkompiloval do následujícího kódu CSS:

#záhlaví {  -webkit-poloměr ohraničení: 5px 10px 8px 2px;  -moz-poloměr ohraničení: 5px 10px 8px 2px;  poloměr ohraničení: 5px 10px 8px 2px;}#zápatí {  -webkit-poloměr ohraničení: 10px 25px 35px 0px;  -moz-poloměr ohraničení: 10px 25px 35px 0px;  poloměr ohraničení: 10px 25px 35px 0px;}

Less má speciální typ sady pravidel nazývaný parametrické mixiny, které lze míchat v podobných třídách, ale přijímá parametry.

#záhlaví {  h1 {    velikost písma: 26px;    váha písma: tučně;  }  p {    velikost písma: 16px;    A {      textová výzdoba: žádný;      barva: Červené;      &:vznášet se {        šířka okraje: 1px;        barva: #fff;      }    }  }}

Výše uvedený kód v Less by se zkompiloval do následujícího kódu CSS:

#záhlaví h1 {  velikost písma: 26px;  váha písma: tučně;}#záhlaví p {  velikost písma: 16px;}#záhlaví p A {  textová výzdoba: žádný;  barva: Červené;}#záhlaví p A:vznášet se {  šířka okraje: 1px;  barva: #fff;}

Funkce a operace

Méně umožňuje operace a funkce. Operace umožňují sčítání, odčítání, dělení a násobení hodnot vlastností a barev, které lze použít k vytvoření složitých vztahů mezi vlastnostmi. Funkce mapují jeden na jednoho pomocí kódu JavaScript, což umožňuje manipulaci s hodnotami.

@-okraj: 1px;@základna-barva: #111;@Červené:        #842210;#záhlaví {  barva: @základní barva * 3;  levý okraj: @hranice;  pravý okraj: @hranice * 3;}#zápatí {  barva: @základní barva + #003300;  barva okraje: desaturovat(@Červené, 10%);}

Výše uvedený kód v Less by se zkompiloval do následujícího kódu CSS:

#záhlaví {  barva: #333;  levý okraj: 1px;  pravý okraj: 3px;}#zápatí {  barva: #114411;  barva okraje: # 7d2717;}

Srovnání

Sass

Oba Sass a Méně jsou preprocesory CSS, které umožňují namísto statických pravidel psát čisté CSS v programovacím konstruktu.^[5]

Méně je inspirováno Sassem.^[6][3] Sass byl navržen tak, aby zjednodušil a rozšířil CSS, takže věci jako složené závorky byly ze syntaxe odstraněny. Less byl navržen tak, aby byl co nejblíže CSS, a jako výsledek lze stávající CSS použít jako platný Less kód.^[7]

Novější verze Sass také zavedly syntaxi podobnou CSS nazvanou SCSS (Sassy CSS).

Použití na webech

Méně lze na stránky aplikovat mnoha způsoby. Jednou z možností je zahrnout less.js JavaScript soubor převést kód on-the-fly. Prohlížeč poté vykreslí výstupní CSS. Další možností je vykreslit kód Less do čistého CSS a nahrát CSS na web. S touto možností se nenahrají žádné soubory .less a web nepotřebuje převaděč JavaScript less.js.

Méně softwaru

Viz také

• Sass (jazyk šablony stylů)
• Stylus (jazyk šablony stylů)

Reference

externí odkazy

• Oficiální webové stránky
• Méně úložiště zdrojového kódu (Git)
• Méně knihovny mixů klobouků
• Sai rozšíření mixinů a rámec pro vytváření CSS pro LESS & SASS / SCSS (Git)