Stylus (jazyk šablony stylů) - Stylus (stylesheet language) - Wikipedia

Stylus
Stylus-logo.svg
NavrhlTJ Holowaychuk
VývojářLearnBoost (29. března 2011 (2011-03-29) - 26. března 2015 (2015-03-26)) / Automattic (26. března 2015 (2015-03-26) - Současnost, dárek)[1]
Poprvé se objevil2010; před 10ti lety (2010)
Stabilní uvolnění
0.53.0[2] / 14. prosince 2015; před 5 lety (2015-12-14)[3]
Psací disciplínadynamický
OSCross-platform
LicenceLicence MIT
Přípony názvu souboru.styl
webová stránkaStylus
Ovlivněno
CSS, Sass, MÉNĚ

Stylus je dynamická šablona stylů preprocesor jazyk, do kterého je kompilován Kaskádové styly (CSS). Jeho design je ovlivněn Sass a MÉNĚ. Považuje se to za čtvrtou nejpoužívanější syntaxi preprocesoru CSS.[4] Vytvořil jej TJ Holowaychuk, bývalý programátor pro Node.js a tvůrce jazyka Luna. Je napsán v NEFRIT a Node.js.

Selektory

Na rozdíl od CSS, který používá rovnátka k otevření a zavření deklaračních bloků se použije odsazení. Středníky (;) jsou navíc volitelně vynechány. Proto následující CSS:

tělo {    barva: bílý;}

lze zkrátit na:

tělo     barva: bílý

Dále jsou dvojtečky (:) a čárky (,) také volitelné; to znamená, že výše uvedené lze zapsat jako,

tělo     barva bílý

Proměnné

Stylus umožňuje definovat proměnné, ale na rozdíl od LESS a Sass nepoužívá k definování proměnných symbol. Přiřazení proměnné se navíc provádí automaticky oddělením vlastnosti a klíčového slova. Tímto způsobem jsou proměnné podobné proměnným v Krajta.

zpráva = 'Ahoj světe!'div::před  obsah zpráva  barva #ffffff

Překladač Stylus přeloží výše uvedený dokument do:

div::před {  obsah: 'Ahoj světe!';  barva: #ffffff;}

Mixiny a funkce

Mixiny i funkce jsou definovány stejným způsobem, ale jsou aplikovány různými způsoby.

Například pokud jste chtěli definovat vlastnost CSS border radius, aniž byste museli používat různé Předpony dodavatele můžete vytvořit:

poloměr ohraničení(n)  -webkit-border-radius n  -moz-border-radius n  poloměr ohraničení n

pak, chcete-li to zahrnout jako mixin, odkazovali byste na to jako:

div.obdélník   poloměr ohraničení(10px)

to by zkompilovat:

div.obdélník {  -webkit-poloměr ohraničení: 10px;  -moz-poloměr ohraničení: 10px;  poloměr ohraničení: 10px;}

Interpolace

Chcete-li zahrnout proměnné do argumentů a identifikátorů, proměnné proměnné obklopují složené znaky. Například, 

 -webkit-{'okraj' + '-poloměr'}

hodnotí na 

-webkit-border-radius

Reference

  1. ^ "LICENCE". GitHub. 2015-03-26. Citováno 2015-12-21.
  2. ^ „Vydání 0.53.0“. GitHub. 2015-12-14. Citováno 2015-12-21.
  3. ^ "Dějiny". GitHub. 2015-12-21. Citováno 2015-12-21.
  4. ^ Výsledky hlasování: Popularita předspracovatelů CSS

externí odkazy