Asenna Stylus ArchLinuxiin kuolematta yrityksessä

Stylus on koodin esikäsittelijä CSS, jonka avulla voimme työskennellä yksinkertaisemmin tekstieditorissamme ja sitten selitän lausuntoni syyt.

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 tyylitaulukko, joka luotiin Kynä:

body font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-säde 5px

Missä ovat avaimet? Missä puolipisteet, kaksoispiste? Unohdettu, Stylus tekee sen meille.

Jos aloitat CSS y HTML sitä ei suositella käytettäväksi Stylus yksinkertaisesta tosiasiasta, että voit unohtaa, miten asiat todella toimivat, mutta jos sinulla on jo aikaa tässä maailmassa ja haluat tallentaa itsellesi koodin ja työn .. jatka.

Ohjelmoijat Python löydät sisään Stylus jotain hyvin samanlaista kuin mihin ne on mukautettu, koska sinun on vain sisennyttävä oikein, jotta taikuutta voidaan tehdä.

Asennus

Joten niin Stylus työ, joka meidän on asennettava Node.js joka on yhteisön haarassa, joten jatkamme sitä:

$ 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ää

Ok, olemme jo asentaneet Node.js ja olemme asentaneet Stylus.. Kuinka käytämme sitä? Se on yksinkertaista. Oletetaan, että meillä on hakemisto, jossa on seuraavat tiedostot:

- dir - index.html - style.css

Meidän on tehtävä tiedosto tyyli. tyyli, jonka kanssa aiomme työskennellä. Tiedostossa voi olla jotain:

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 "koota" tiedostoa. Voit kääntää sen avaamalla päätelaitteen hakemistoon (missä tiedosto tyyli. tyyli) ja toteutamme:

stylus -c style.styl

Mutta joka kerta kun tallennamme tiedoston tyyli. tyyli meidän on suoritettava koodi, mutta onneksi se ei ole välttämätöntä, koska jos suoritamme saman komennon, mutta lisäämällä parametri -w (katsella) 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äette, koodimme ei vain luo meitä CSS, mutta eliminoi tarpeettomat välit niin, että tyylisivumme painaa vähemmän 😀

Eikä vain se, Stylus Sen avulla voimme siirtää CSS-tiedostoja niiden muotoon, ja tapa, jolla voimme käyttää niiden syntaksia, on hyvin vaihteleva. Ja tämä on vain esikatselu. Joten kannustan sinua, jos olet kiinnostunut, tietämään hieman enemmän Stylus