Stylus en CSS-preprocessor

I de flesta node.js projekt jag jobbat med så brukar jag oftas kra med Stylus då Express.js har stöd för den vid generation av nytt projekt. I Stylus krävs mycket färre tecken då varken :, ; eller {} används, allt bygger på rätt indentation och man kan även nästla selectors på samma sätt som SCSS & LESS tex:

/* CSS */
body {
  background: red;
  font-size: 45px;
}
.thing {
  color: green;
}
.thing p {
  margin: 0 0 10px;
}

/* Stylus */
body
  background red
  font-size 45px

.thing
  color green
  p
    margin 0 0 10px

För att använda stylus i ditt node.js (Express.js, Koa.js) projekt inkludera stylus i package.json och sedan i app filen:

var koa = require('koa'),
    app = koa(),
    stylus = require('koa-stylus'),
    serve = require('koa-static');

// Place where the .styl are
app.use(stylus('./public'));
// Send static files
app.use(serve('./public'));
// more code ...

I Koa behöver du även använda middleware för att leverera statiska filer, “koa-static” i detta fall och här använder jag mig även av koa-stylus.

Stylus är fortfarande ungt och inte fullt lika adopterat som SCSS eller LESS men det funkar enkelt och smidigt att få igång med node.js projekt och jag föredrar det framför LESS. Så till nästa projekt ge det ett försök.

Leave a Reply

Your email address will not be published. Required fields are marked *