Stylus er en kodeprosessor CSS, som lar oss jobbe enklere i tekstredigereren vår, og deretter forklarer jeg årsakene til uttalelsen min.
Dette er et stilark slik vi kjenner det:
kropp {font: 12px Helvetica, Arial, sans-serif; } a.knapp {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
Og dette ville være det samme stilarket som ble opprettet med Pekepenn:
kroppsskrift 12px Helvetica, Arial, sans-serif a. knapp -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Hvor er nøklene? Hvor kom semikolonene, kolonet? Glemt, Stylus gjør det for oss.
Hvis du begynner med CSS y HTML det anbefales ikke å bruke Stylus for det enkle faktum at du kan glemme hvordan ting virkelig fungerer, men hvis du allerede har tid i denne verden og vil spare deg selv kode og jobbe .. fortsett.
Programmerere Python vil finne i Stylus noe som er veldig likt det de er tilpasset, siden du bare trenger å rykke inn riktig for at magien skal gjøres.
Installasjon
Så det Stylus arbeid vi må installere node.js som er i fellesskapsgrenen, så vi fortsetter å gjøre det:
$ sudo pacman -S nodejs
Og senere installerer vi Stylus. Den tradisjonelle måten ville være:
$ npm install -g stylus
Det installerer bra, men det fungerer ikke for meg, så det er mye lettere å installere fra AUR:
$ yaourt -S nodejs-stylus
Hvordan bruke Stylus
Ok, vi har allerede installert node.js og vi har installert Stylus.. Hvordan bruker vi det? Det er enkelt. La oss si at vi har en katalog med følgende filer:
- dir - index.html - style.css
Det vi må gjøre er å lage filen stil. stil, som er den vi skal jobbe med. I den filen kan vi ha noe sånt som:
kropps bakgrunnsfarge #ffff skriftstørrelse 12px a. knappfarge rød polstring 10px
Hvis vi lagrer eller gjør noen endringer, skjer det ingenting fordi vi ikke "kompilerer" filen vår. For å kompilere det, det vi gjør er å åpne en terminal i katalogen vår (hvor filen stil. stil) og utføre:
stylus -c style.styl
Men hver gang vi lagrer filen stil. stil vi må utføre koden, men heldigvis er det ikke nødvendig, siden hvis vi utfører den samme kommandoen, men legger til parameteren -w (se) følgende skjer:
stylus -c -w style.styl watching /usr/lib/node_modules/stylus/lib/functions/index.styl compiled style.css watch style.styl compiled style.css kompilert style.css
Med andre ord blir filen automatisk samlet .. Ville resultatet bli?
kropp {bakgrunnsfarge: #fff; skriftstørrelse: 12px} a.knapp {farge: # f00; polstring: 10px}
Som du kan se, skaper ikke bare koden vår oss CSS, men det eliminerer unødvendige mellomrom slik at stilarket vårt veier mindre
Ikke bare det, Stylus Det lar oss sende CSS-filer til deres format, og måten vi kan bruke syntaksen på er veldig variert. Og dette er bare en forhåndsvisning. Så jeg oppfordrer deg hvis du er interessert, å vite litt mer om Stylus