Stylus on CSS- koodin esikäsittelijä , jonka avulla voimme työskennellä helpommin tekstieditorissamme, ja alla selitän väitteeni perustelut.
Tämä on tyylitaulukko sellaisena kuin me sen tunnemme:
body {font: 12px Helvetica, Arial, sans-serif; } a. painike {-webkit-border-säde: 5px; -moz-raja-säde: 5 kuvapistettä; reunan säde: 5 kuvapistettä; }
Ja tämä olisi sama tyylitiedosto, joka on luotu Stylus-kynällä:
body font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-säde 5px
Missä näppäimet ovat? Minne puolipisteet ja kaksoispisteet katosivat? Oblivion. Stylus tekee sen puolestamme.
Jos olet vasta aloittamassa CSS:n ja HTML:n kanssa, kynän käyttöä ei suositella vain siksi, että saatat unohtaa, miten asiat oikeasti toimivat. Mutta jos olet ollut alalla jo jonkin aikaa ja haluat säästää koodausta ja vaivaa... tee se.
Python -ohjelmoijat löytävät Stylus-kynästä jotain hyvin samankaltaista kuin mihin he ovat tottuneet, sillä heidän tarvitsee vain sisentää oikein, jotta taika tapahtuu.
Asennus
Jotta Stylus toimisi, meidän on asennettava Node.js, joka sijaitsee Community-haarassa, joten jatkamme näin:
$ sudo pacman -S nodejs
Ja myöhemmin asennamme Styluksen. Perinteinen tapa olisi:
$ npm install -g stylus
Se asennetaan hyvin, mutta se ei toimi minulle, joten se on paljon helpompi asentaa AUR: sta:
$ yaourt -S nodejs-stylus
Kuinka käyttää kynää
Okei, meillä on asennettuna Node.js ja Stylus . Miten käytämme niitä? Se on yksinkertaista. Oletetaan, että meillä on hakemisto, jossa on seuraavat tiedostot:
- dir - index.html - style.css
Meidän täytyy luoda style.styl- tiedosto , jota tulemme käyttämään. Tiedostossa voi olla jotain seuraavanlaista:
body background-color #ffff font-size 12px a. painikkeen väri punainen täyte 10px
Jos tallennamme tai teemme muutoksia, mitään ei tapahdu, koska emme "käännä" tiedostoamme. Kääntääksemme sen avaamme terminaalin hakemistossamme (missä style.styl -tiedosto sijaitsee ) ja suoritamme:
stylus -c style.styl
Mutta joka kerta kun tallennamme style.styl -tiedoston , meidän pitäisi suorittaa koodi, mutta onneksi se ei ole välttämätöntä, koska jos suoritamme saman komennon, mutta lisäämme -w (watch) -parametrin, tapahtuu seuraavaa:
stylus -c -w style.styl katselu /usr/lib/node_modules/stylus/lib/functions/index.styl käännetty style.css katselu style.styl käännetty style.css käännetty style.css
Toisin sanoen tiedosto käännetään automaattisesti .. Tulos olisi?
body {background-color: #fff; font-size: 12px} a. painike {color: # f00; pehmuste: 10px}
Kuten näet, se ei ainoastaan luo CSS- koodiamme , vaan myös poistaa tarpeettomat välilyönnit, jotta tyylitiedostomme painaa vähemmän.
Sen lisäksi Stylus mahdollistaa CSS-tiedostojen muuntamisen sen muotoon, ja tapoja käyttää sen syntaksia on uskomattoman monipuolisesti. Ja tämä on vasta maistiainen. Joten jos olet kiinnostunut, kannustan sinua oppimaan lisää Stylusista.