Stylus ir CSS koda priekšapstrādātājs , kas ļauj mums vieglāk strādāt teksta redaktorā, un tālāk es paskaidrošu sava apgalvojuma iemeslus.
Šī ir stila lapa, kā mēs to zinām:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-pierobežas rādiuss: 5px; apmales rādiuss: 5px; }
Un šī būtu tā pati stila lapa, kas izveidota ar Stylus:
ķermeņa fonts 12 pikseļi Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Kur ir atslēgas? Kur palika semikoli un koli? Oblivion. To mūsu vietā izdara irbulis .
Ja jūs tikai sākat darbu ar CSS un HTML, Stylus lietošana nav ieteicama tikai tāpēc, ka jūs varētu aizmirst, kā lietas patiesībā darbojas. Bet, ja jūs jau kādu laiku strādājat šajā jomā un vēlaties ietaupīt sev kodu un pūles... dariet to.
Python programmētāji Stylus atradīs kaut ko ļoti līdzīgu tam, pie kā viņi ir pieraduši, jo viņiem tikai pareizi jāiestata atkāpe, lai notiktu maģija.
Uzstādīšana
Lai Stylus darbotos, mums jāinstalē Node.js, kas atrodas kopienas filiālē, tāpēc mēs to darām:
$ sudo pacman -S nodejs
Un vēlāk mēs instalējam Stylus. Tradicionālais veids būtu:
$ npm install -g stylus
Tas ir labi instalēts, bet man tas nedarbojas, tāpēc to ir daudz vieglāk instalēt no AUR:
$ yaourt -S nodejs-stylus
Kā lietot Stylus
Labi, mums ir instalēti Node.js un Stylus . Kā mēs tos lietojam? Tas ir vienkārši. Pieņemsim, ka mums ir direktorijs ar šādiem failiem:
- dir - index.html - style.css
Mums ir jāizveido fails style.styl , ar kuru mēs strādāsim. Šajā failā var būt kaut kas līdzīgs šim:
ķermeņa fona krāsa #ffff fonta lielums 12 pikseļi a. pogas krāsa sarkana polsterējums 10 pikseļi
Ja saglabājam vai veicam izmaiņas, nekas nenotiek, jo mēs "nekompilējam" savu failu. Lai to kompilētu, atveram termināli mūsu direktorijā (kur atrodas fails style.styl ) un palaižam:
stylus -c style.styl
Taču katru reizi, kad saglabājam failu style.styl , mums būtu jāpalaiž kods, bet par laimi tas nav nepieciešams, jo, ja mēs palaižam to pašu komandu, bet pievienojam parametru -w (watch), notiek sekojošais:
irbulis -c -w style.styl skatīšanās /usr/lib/node_modules/stylus/lib/functions/index.styl sastādīts style.css skatīšanās style.styl sastādīts style.css sastādīts style.css
Citiem vārdiem sakot, fails tiek automātiski sastādīts .. Vai rezultāts būtu?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Kā redzat, tas ne tikai izveido mūsu CSS kodu , bet arī noņem nevajadzīgās atstarpes, lai mūsu stila lapa svērtu mazāk.
Turklāt Stylus ļauj mums konvertēt CSS failus uz tā formātu, un veidi, kā mēs varam izmantot tā sintaksi, ir neticami dažādi. Un šī ir tikai neliela ieskata iespēja. Tāpēc, ja jūs tas interesē, iesaku uzzināt vairāk par Stylus.