Stylus je CSS preprocesor koda koji nam omogućava lakši rad u našem tekstualnom editoru, a u nastavku ću objasniti razloge za svoju tvrdnju.
Ovo je stil lista kakav poznajemo:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-radijus-granice: 5px; radijus granice: 5px; }
I ovo bi bio isti stilski list kreiran pomoću Stylusa:
font teksta 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Gdje su tipke? Gdje su nestali tačka-zarez i dvotačka? Zaborav. Stylus to radi za nas.
Ako tek počinjete s CSS-om i HTML-om, korištenje Stylusa se ne preporučuje jednostavno zato što biste mogli zaboraviti kako stvari zapravo funkcioniraju. Ali ako ste već neko vrijeme u ovoj oblasti i želite uštedjeti malo koda i truda... samo naprijed.
Python programeri će u Stylusu pronaći nešto vrlo slično onome na što su navikli, jer im je potrebno samo pravilno uvlačenje da bi se magija dogodila.
Instalacija
Da bi Stylus radio, potrebno je instalirati Node.js, koji se nalazi u grani Community, pa nastavljamo sa sljedećim:
$ sudo pacman -S nodejs
A kasnije instaliramo Stylus. Tradicionalni način bio bi:
$ npm install -g stylus
Dobro se instalira, ali kod mene ne radi, pa je mnogo lakše instalirati iz AUR-a:
$ yaourt -S nodejs-stylus
Kako se koristi Stylus
U redu, imamo instalirane Node.js i Stylus . Kako ih koristimo? Jednostavno je. Recimo da imamo direktorij sa sljedećim datotekama:
- dir - index.html - style.css
Ono što trebamo uraditi jeste da kreiramo datoteku style.styl , s kojom ćemo raditi. U toj datoteci možemo imati nešto poput:
tijelo pozadine-boja #ffff veličina fonta 12px a.button boja crvena podloga 10px
Ako sačuvamo ili napravimo bilo kakve promjene, ništa se ne događa, jer ne "kompajliramo" našu datoteku. Da bismo je kompajlirali, otvaramo terminal u našem direktoriju (gdje se nalazi datoteka style.styl ) i pokrećemo:
stylus -c style.styl
Ali svaki put kada sačuvamo datoteku style.styl , morali bismo pokrenuti kod, ali srećom to nije potrebno, jer ako pokrenemo istu komandu, ali dodamo parametar -w (watch), dešava se sljedeće:
stylus -c -w style.styl gledanje /usr/lib/node_modules/stylus/lib/functions/index.styl kompajlirani style.css gledanje style.styl kompajlirani style.css kompajlirani style.css
Drugim riječima, datoteka se automatski kompajlira .. Da li bi rezultat bio?
tijelo {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Kao što vidite, ne samo da kreira naš CSS kod , već i uklanja nepotrebne razmake tako da naš stilski list teži manje
Ne samo to, Stylus nam omogućava da konvertujemo CSS datoteke u njegov format, a načini na koje možemo koristiti njegovu sintaksu su nevjerovatno raznoliki. A ovo je samo mali uvid. Dakle, ako ste zainteresovani, preporučujem vam da saznate više o Stylusu.