js4

Write CSS with ES6 JavaScript.

Install

npm install -g js4 # may require sudo

Write your CSS in JS in a file, for example css.js:

new Rule('body', { color : 'red' });

new Rule('#id, .class > [attr]', { 'text-align' : 'center' });

Then compile it from terminal:

js4 css.js

Outputs:

body {
  color: red;
}

#id, .class > [attr] {
  text-align: center;
}

To compile to a source file:

js4 css.js > css.css

Now you can use JS to do advanced stuff in your CSS such as declarations or scopes:

const COLOR = 'red';

for ( let i = 0; i < 10; i ++ ) {
  new Rule(`#p-${i}`, { color : COLOR, width : `${i * 25}px`  });
}

You can use mixin and reusable rules such as:

let reusable = new Rule('.foo', { color : 'red' });

new Rule('.bar', { reusable, 'padding' : '10px' });

.foo {
  color: red;
}

.bar {
  color: red;
  padding: 10px;
}

If you don't want the mixin to appear on CSS, do like this:

let reusable = new Rule('.foo', { color : 'red' }, { render : false });

new Rule('.bar', { reusable, 'padding' : '10px' });