Začínáme se Stylusem

V rámci vývoje webových aplikací, se mluví hodně o dvou populárních CSS preprocesorem a to jsou Sass a Less. Ne tak často se mluví o Stylusu.

Proč si vybrat Stylus

Jednoduchá odpověď, z několika důvodů:

  • Třeba proto, že Stylus je na bázi NodeJS, nemusíte si instalovat další technologie jako například Ruby pro Sass.
  • Stylus nevyžaduje závorky, dvojtečky nebo středníky, syntaxe je čistá.
  • Je celkem dost mixin knihoven pro Stylus.

Samozřejmě Stylus poskytuje standardní vlastnosti a funkce jako každý jiný preprocesor. Jako je vnořování tříd, vytváření mixinů ,funkcí, import stylů a nastavení proměnných. Pojďme se podívat tedy na základy Stylusu.

Instalace

Stylus je open source projekt a můžete ho najít na GitHubu. Můžete ho nainstalovat jednoduše použitím NPM:

npm install stylus -g

Koncovka CSS souborů v syntaxi Stylusu by měla být .styl a tyto soubory mohou být umístěny kdekoli v rámci vašeho projektu. Žádný konfigurační soubor není potřeba (ale je dobré využít například Gulp a Gulp-stylus), kompilaci kódu je možné jednoduše spustit nástrojem Stylusu pro generování CSS:

stylus stylus/styles.styl --out /css --compress

Tento příkaz zkompiluje styles.styl do CSS souboru se stejným názvem a v minifikované verzi.

Syntaxe

Základy syntaxe jsou velmi podobné jako u jiných CSS preprocesorů:

/* Nastavení proměnné */

main-font-size = 16px

/* Základní nastavení barvy a pozadí elementu body */
body
color #000
background #fff

/* Vnoření */

nav
margin 10px
ul
list-style-type none

/* Import dalších souborů Stylusu */

@import '_variables.styl'

Mixiny

Mixiny jsou neuvěřitelně užitečné v CSS preprocesorech pro řadu situací. Syntaxe mixinů ve Stylusu je:

/* Základní mixin a jeho použití */

vendorize(box-sizing, border-box)
vendorize(property, value)
-webkit-{property} value
-moz-{property} value
-ms-{property} value
{property} value

Závěrem

Stylus je vynikající CSS preprocessor a nabízí širokou škálu základních a pokročilých funkcí. Instalace je rychlá bez žádných dalších vyžadujících technologií. Je to neuvěřitelně zábavné, jednoduché a rychlé psát v syntaxi Stylusu. Dejte Stylusu šanci a zkuste ho!