Rework your CSS – CSS preprocessing using Node.js

View Github Repository Open presentation in a new window

simme

See all presentation from simme

Rework your CSS – CSS preprocessing using Node.js

0 0

node-meetup-rework

Slides from my talk on Rework

On Github simme / node-meetup-rework

Rework your CSS

CSS preprocessing using Node.js

Simon Ljungberg

Lead front-end developer at Bloglovin.com

Rework

Why Rework? How it compares to SASS/LESS How it works Some neat plugins How to write your own plugins

Quick Example

            
var rework = require('rework');
var plugin = require('plugin');
var plugin2 = require('plugin2');

var str = fs.readFileSync('mystylesheet.css', 'utf8');
var css = rework(str)
  .use(plugin())
  .use(plugin())
  .toString();

What about SASS/LESS

  • Lower level
  • No utilities (watch etc)
  • No logic built in (for, if etc)

Why Rework?

  • All Node stack
  • Easily extend the preprocessing to fit your needs
  • Invent your own properties!
  • Build your own "SASS"

How it works

Create AST
var css = rework(str)
Pass AST to each plugin and let them modify the AST in turn 
.use(plugin())
Create string form AST — voila! 
.toString();

Live coding!

What could go wrong?

Examples on GitHub

Some links

That's it!