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 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
Det er med:
$ sudo npm installer -g stylus
Men hvorfor? Hvis jeg bare vil bruke den i økten min .. men hei, hvis problemet er det .. 🙂
Dette er bra i begynnelsen, men Stylus brukes med forskjellige plugins når du går, for eksempel Nib eller Stylus auto prefixer.
Jeg tror at når du installerer den med Yaourt, blir den ikke lagret i / usr / local / lib / node_modules, og hvis du prøvde å importere og bruke noen av bibliotekene, ville du knulle xD
Det hender at som jeg fortalte deg i forumet, er Stylus basert på å bruke biblioteker transparent fra terminalen, det er essensen av denne forprosessoren, den gjør ting som:
stylus -u jeet -u rupture -u typografisk -u nib -w style.styl
For å si noe (du kan ha et alias eller en funksjon eller bruke gulp eller grynt, eller hva som helst: 3). Det interessante med dette er at det ikke preger css ut av esken når du kompilerer, men det fyller det "dynamisk" da du kaller funksjonene og mixinsene til de respektive bibliotekene i koden din.
I virkeligheten vil det sette flat kode som blir deklarert (tilbakestilles, clearfixes osv.), Men det vil ikke få deg til å røyke for eksempel span () -funksjonene til jeet hvis du ikke kaller dem og det er ren kjærlighet x3
Det er en hel verden, og det er derfor jeg forteller deg at jeg installerer den på den måten. Jeg vet ikke hvilke filer den faller inn i, og jeg tror ikke du kan bruke utvidelsene så enkelt fordi når du bruker kommandolinjen, - bruk flagg vil se inne i stylusinstallasjonen, med node er det node_modules og det forblir der jeg sa ovenfor, med Yaourt, NPI xD
interessant!
Jeg foreslår at du gjør en oppdatert opplæring om hvordan du bruker et SIP-nummer til å ringe mobiltelefoner fra datamaskinen ... gratis