postcss-closure-mixins

PostCSS Sassy Mixins

PostCSS plugin for GWT/Google Closure Stylesheets like mixins.

This plugin is based on postcss-sassy-mixins. Since Closure stylesheets feature another, arguably weird, syntax, this plugin changes its at-Rules and variable handling.

Installation

npm install postcss-closure-mixins

Usage

var postcss = require('postcss');
var mixins = require('postcss-closure-mixins');
 
var options = {
   // options here
};
 
var output = postcss()
  .use(mixins(options))
  .process(css)
  .css;

@defmixin border-radius(RADIUS) {
  -webkit-border-radius: RADIUS;
     -moz-border-radius: RADIUS;
      -ms-border-radius: RADIUS;
          border-radius: RADIUS;
}
 
.box { @mixin border-radius(10px); }

Turns into:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}