Stylus je preprocesor CSS kódu , který nám umožňuje snadnější práci v textovém editoru, a níže vysvětlím důvody svého tvrzení.
Toto je šablona stylů, jak ji známe:
body {písmo: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; poloměr ohraničení: 5px; }
A tohle by byl stejný stylový list vytvořený pomocí Stylusu:
tělo písmo 12px Helvetica, Arial, sans-serif a. tlačítko -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Kde jsou klávesy? Kam se poděly středníky a dvojtečky? Zapomnění. To za nás udělá Stylus .
Pokud s CSS a HTML teprve začínáte , používání Stylusu se nedoporučuje, jednoduše proto, že byste mohli zapomenout, jak věci vlastně fungují. Pokud se ale v tomto oboru pohybujete už nějakou dobu a chcete si ušetřit nějaký kód a úsilí... směle do toho.
Programátoři v Pythonu najdou ve Stylusu něco velmi podobného, na co jsou zvyklí, protože stačí jen správně odsazovat, aby se magie stala.
Instalace
Aby Stylus fungoval, musíme nainstalovat Node.js, který se nachází ve větvi Community, takže postupujeme takto:
$ sudo pacman -S nodejs
A později nainstalujeme Stylus. Tradiční způsob by byl:
$ npm install -g stylus
Instaluje se dobře, ale nefunguje to pro mě, takže je mnohem jednodušší instalovat z AUR:
$ yaourt -S nodejs-stylus
Jak používat Stylus
Dobře, máme nainstalovaný Node.js a Stylus . Jak je použijeme? Je to jednoduché. Řekněme, že máme adresář s následujícími soubory:
- dir - index.html - style.css
Potřebujeme vytvořit soubor style.styl , se kterým budeme pracovat. V tomto souboru můžeme mít něco jako:
barva pozadí těla #ffff velikost písma 12px a. barva tlačítka červená výplň 10px
Pokud soubor uložíme nebo provedeme jakékoli změny, nic se nestane, protože soubor „nekompilujeme“. Pro jeho kompilaci otevřeme terminál v našem adresáři (kde se nachází soubor style.styl ) a spustíme:
stylus -c style.styl
Ale pokaždé, když uložíme soubor style.styl , budeme muset kód spustit, ale naštěstí to není nutné, protože pokud spustíme stejný příkaz, ale přidáme parametr -w (watch), stane se následující:
stylus -c -w style.styl sledování /usr/lib/node_modules/stylus/lib/functions/index.styl kompilovaný style.css sledování style.styl kompilovaný style.css kompilovaný style.css
Jinými slovy, soubor je automaticky kompilován. Byl by výsledek?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Jak vidíte, nejenže vytváří náš CSS kód , ale také odstraňuje nepotřebné mezery, takže náš stylový list váží méně
Nejen to, Stylus nám umožňuje převádět CSS soubory do svého formátu a způsoby, jakými můžeme jeho syntaxi využít, jsou neuvěřitelně rozmanité. A to je jen ochutnávka. Takže pokud máte zájem, doporučuji vám dozvědět se o Stylusu více.