Stylus er en CSS -kodeforbehandler , som gør det nemmere for os at arbejde i vores teksteditor, og nedenfor vil jeg forklare årsagerne til min udtalelse.
Dette er et stilark, som vi kender det:
krop {font: 12px Helvetica, Arial, sans-serif; } a. knap {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
Og dette ville være det samme stylesheet, der er oprettet med Stylus:
kropsskrifttype 12px Helvetica, Arial, sans-serif a. knap -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Hvor er tasterne? Hvor blev semikolon og kolon af? Glemsel. Det gør stylus for os.
Hvis du lige er startet med CSS og HTML, anbefales det ikke at bruge en stylus, simpelthen fordi du kan glemme, hvordan tingene rent faktisk fungerer. Men hvis du har arbejdet i dette felt i et stykke tid og vil spare dig selv noget kode og besvær ... så gør det.
Python- programmører vil finde noget i Stylus , der minder meget om det, de er vant til, da de kun skal indrykke korrekt for at magien kan ske.
Installation
For at Stylus kan virke, skal vi installere Node.js, som er placeret i Community-grenen, så vi fortsætter med at gøre det:
$ sudo pacman -S nodejs
Og senere installerer vi Stylus. Den traditionelle måde ville være:
$ npm install -g stylus
Det installerer fint, men det virker ikke for mig, så det er meget lettere at installere fra AUR:
$ yaourt -S nodejs-stylus
Sådan bruges Stylus
Okay, vi har Node.js og Stylus installeret . Hvordan bruger vi dem? Det er simpelt. Lad os sige, at vi har en mappe med følgende filer:
- dir - index.html - style.css
Det vi skal gøre er at oprette filen style.styl , som er den vi skal arbejde med. I den fil kan vi have noget i retning af:
kropsbaggrundsfarve #ffff skriftstørrelse 12px a. knapfarve rød polstring 10px
Hvis vi gemmer eller foretager ændringer, sker der ingenting, fordi vi ikke "kompilerer" vores fil. For at kompilere den åbner vi en terminal i vores mappe (hvor style.styl -filen er placeret ) og kører:
stylus -c style.styl
Men hver gang vi gemmer style.styl- filen , skal vi køre koden, men heldigvis er det ikke nødvendigt, for hvis vi kører den samme kommando, men tilføjer parameteren -w (watch), sker følgende:
stylus -c -w style.styl watching /usr/lib/node_modules/stylus/lib/functions/index.styl compiled style.css watch style.styl kompileret style.css kompileret style.css
Med andre ord kompileres filen automatisk .. Ville resultatet blive?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Som du kan se, opretter den ikke kun vores CSS- kode , men fjerner også unødvendige mellemrum, så vores stylesheet vejer mindre
Ikke nok med det, Stylus giver os mulighed for at konvertere CSS-filer til dens format, og måderne, vi kan bruge dens syntaks på, er utroligt varierede. Og dette er bare en smagsprøve. Så hvis du er interesseret, vil jeg opfordre dig til at lære mere om Stylus.