Stylus je predprocesor kode CSS , ki nam omogoča lažje delo v urejevalniku besedil, in spodaj bom pojasnil razloge za svojo trditev.
To je slog sloga, kot ga poznamo:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-polmer meje: 5 slikovnih pik; polmer obrobe: 5 slikovnih pik; }
In to bi bila ista slogovna predloga, ustvarjena s Stylusom:
pisava telesa 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Kje so tipke? Kam so izginile podpičja in dvopičja? Pozabljivost. To namesto nas naredi pisalo .
Če šele začenjate s CSS in HTML, uporaba Stylusa ni priporočljiva, preprosto zato, ker bi lahko pozabili, kako stvari dejansko delujejo. Če pa ste na tem področju že nekaj časa in si želite prihraniti nekaj kode in truda ... kar izvolite.
Programerji v Pythonu bodo v Stylusu našli nekaj zelo podobnega tistemu, česar so vajeni, saj morajo le pravilno zamakniti, da se čarovnija zgodi.
Namestitev
Da bi Stylus deloval, moramo namestiti Node.js, ki se nahaja v veji Community, zato nadaljujemo z naslednjim:
$ sudo pacman -S nodejs
In kasneje namestimo Stylus. Tradicionalni način bi bil:
$ npm install -g stylus
Dobro se namesti, vendar zame ne deluje, zato je veliko lažje namestiti iz AUR:
$ yaourt -S nodejs-stylus
Kako uporabljati pisalo
V redu, imamo nameščena Node.js in Stylus . Kako ju uporabimo? Preprosto je. Recimo, da imamo mapo z naslednjimi datotekami:
- dir - index.html - style.css
Kar moramo storiti, je ustvariti datoteko style.styl , s katero bomo delali. V tej datoteki lahko imamo nekaj takega:
telo ozadja-barva #ffff velikost pisave 12px a.button barva rdeča obloga 10px
Če shranimo ali naredimo kakršne koli spremembe, se ne zgodi nič, ker datoteke ne "prevajamo". Za prevajanje odpremo terminal v našem imeniku (kjer se nahaja datoteka style.styl ) in zaženemo:
stylus -c style.styl
Vsakič, ko shranimo datoteko style.styl , pa bi morali zagnati kodo, vendar na srečo to ni potrebno, saj če zaženemo isti ukaz, vendar dodamo parameter -w (watch), se zgodi naslednje:
stylus -c -w style.styl gledanje /usr/lib/node_modules/stylus/lib/functions/index.styl sestavljen style.css gledanje style.styl sestavljen style.css sestavljen style.css
Z drugimi besedami, datoteka se samodejno prevede. Bi bil rezultat?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Kot lahko vidite, ne samo ustvari našo CSS kodo , ampak tudi odstrani nepotrebne presledke, tako da naša slogovna predloga tehta manj
Ne samo to, Stylus nam omogoča pretvorbo datotek CSS v svojo obliko, načini uporabe njegove sintakse pa so neverjetno raznoliki. In to je le poskus. Če vas torej zanima, vas spodbujam, da izveste več o Stylusu.