Stylus este un preprocesor de cod CSS , care ne permite să lucrăm mai ușor în editorul nostru de text, iar mai jos voi explica motivele afirmației mele.
Aceasta este o foaie de stil așa cum o cunoaștem:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; raza chenarului: 5px; }
Și aceasta ar fi aceeași foaie de stil creată cu Stylus:
font corp 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Unde sunt tastele? Unde au dispărut punct și virgulă? Oblivion. Stylus face asta pentru noi.
Dacă abia începi cu CSS și HTML, nu este recomandat să folosești Stylus, pur și simplu pentru că ai putea uita cum funcționează lucrurile de fapt. Dar dacă lucrezi în acest domeniu de ceva vreme și vrei să economisești cod și efort... fă-o.
Programatorii Python vor găsi în Stylus ceva foarte similar cu ceea ce sunt obișnuiți, deoarece trebuie doar să indenteze corect pentru ca magia să se întâmple.
Instalare
Pentru ca Stylus să funcționeze, trebuie să instalăm Node.js, care se află în ramura Community, așa că procedăm astfel:
$ sudo pacman -S nodejs
Și mai târziu instalăm Stylus. Modul tradițional ar fi:
$ npm install -g stylus
Se instalează bine, dar nu funcționează pentru mine, deci este mult mai ușor de instalat din AUR:
$ yaourt -S nodejs-stylus
Cum se utilizează Stylus
Bine, avem Node.js și Stylus instalate . Cum le folosim? E simplu. Să presupunem că avem un director cu următoarele fișiere:
- dir - index.html - style.css
Ceea ce trebuie să facem este să creăm fișierul style.styl , care este cel cu care vom lucra. În acel fișier, putem avea ceva de genul:
corpul fundal-culoare #ffff font-size 12px a. buton culoare roșie căptușeală 10px
Dacă salvăm sau facem modificări, nu se întâmplă nimic, deoarece nu „compilăm” fișierul nostru. Pentru a-l compila, deschidem un terminal în directorul nostru (unde se află fișierul style.styl ) și rulăm:
stylus -c style.styl
Dar de fiecare dată când salvăm fișierul style.styl , ar trebui să rulăm codul, dar din fericire acest lucru nu este necesar, deoarece dacă rulăm aceeași comandă, dar adăugând parametrul -w (watch), se întâmplă următoarele:
stylus -c -w style.styl watching /usr/lib/node_modules/stylus/lib/functions/index.styl compilated style.css watching style.styl compilated style.css compilated style.css
Cu alte cuvinte, fișierul este compilat automat .. Rezultatul ar fi?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
După cum puteți vedea, nu numai că creează codul nostru CSS , dar elimină și spațiile inutile, astfel încât foaia noastră de stil să cântărească mai puțin.
Nu numai atât, Stylus ne permite să convertim fișiere CSS în formatul său, iar modurile în care putem folosi sintaxa sa sunt incredibil de variate. Și aceasta este doar o mostră. Așadar, dacă sunteți interesați, vă încurajez să aflați mai multe despre Stylus.