Stylus är en CSS -kodförbehandlare som gör att vi kan arbeta enklare i vår textredigerare, och nedan kommer jag att förklara skälen till mitt påstående.
Detta är ett stilark som vi känner till det:
kropp {font: 12px Helvetica, Arial, sans-serif; } a.knapp {-webkit-border-radius: 5px; -moz-border-radius: 5px; gränsradie: 5 pixlar; }
Och detta skulle vara samma stilark som skapats med Stylus:
kroppstyp 12px Helvetica, Arial, sans-serif a. knapp -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Var är tangenterna? Vart tog semikolon och kolon vägen? Glömska. Pennan gör det åt oss.
Om du precis har börjat med CSS och HTML rekommenderas det inte att använda en stylus , helt enkelt för att du kan glömma hur saker och ting faktiskt fungerar. Men om du har arbetat inom det här området ett tag och vill spara lite kod och ansträngning ... kör på.
Python -programmerare kommer att hitta något väldigt likt det de är vana vid i Stylus , eftersom de bara behöver indentera korrekt för att magin ska hända.
installation
För att Stylus ska fungera måste vi installera Node.js, som finns i Community-grenen, så vi fortsätter med det:
$ sudo pacman -S nodejs
Och senare installerar vi Stylus. Det traditionella sättet skulle vara:
$ npm install -g stylus
Det installerar bra, men det fungerar inte för mig, så det är mycket lättare att installera från AUR:
$ yaourt -S nodejs-stylus
Hur man använder Stylus
Okej, vi har Node.js och Stylus installerade . Hur använder vi dem? Det är enkelt. Låt oss säga att vi har en katalog med följande filer:
- dir - index.html - style.css
Det vi behöver göra är att skapa filen style.styl , vilket är den vi kommer att arbeta med. I den filen kan vi ha något i stil med:
kroppsbakgrundsfärg #ffff fontstorlek 12px a. knappfärg röd stoppning 10px
Om vi sparar eller gör några ändringar händer ingenting, eftersom vi inte "kompilerar" vår fil. För att kompilera den öppnar vi en terminal i vår katalog (där filen style.styl finns ) och kör:
stylus -c style.styl
Men varje gång vi sparar style.styl- filen skulle vi behöva köra koden, men som tur är är det inte nödvändigt, för om vi kör samma kommando, men lägger till parametern -w (watch), händer följande:
stylus -c -w style.styl watching /usr/lib/node_modules/stylus/lib/functions/index.styl compiled style.css watch style.styl compiled style.css compiled style.css
Med andra ord kompileras filen automatiskt. Skulle resultatet bli?
body {background-color: #fff; font-size: 12px} a.knapp {color: # f00; padding: 10px}
Som du kan se skapar den inte bara vår CSS- kod , utan tar även bort onödiga mellanslag så att vårt stilark väger mindre
Inte bara det, Stylus låter oss konvertera CSS-filer till dess format, och sätten vi kan använda dess syntax är otroligt varierade. Och detta är bara ett smakprov. Så om du är intresserad uppmuntrar jag dig att lära dig mer om Stylus.