gulp-sass-to-postcss-mixins

Plugin to replace sass-syntax mixins with PostCSS mixins. Intended to be used before running PreCSS plugin for PostCSS with SugarSS parser.

TL;DR: Helps PostCSS behave almost like .sass files.

Usage

First, install gulp-sass-to-postcss-mixins as a development dependency:

npm install --save-dev gulp-sass-to-postcss-mixins

Then, add it to your gulpfile.js:

Example usage

var sassmixins = require('gulp-sass-to-postcss-mixins');
var sugarss    = require('sugarss');
var precss     = require('precss');
 
gulp.task('css', function(){
  gulp.src(['source/style.sass'])
    .pipe(sassmixins())
    // running postcss-mixins plugin here, or [PreCSS](https://github.com/jonathantneal/precss)
    .pipe(postcss([precss],{ parser: sugarss }))
    .pipe(gulp.dest('build/'));
});

What it does

It takes valid sass-syntax mixins like this:

.box
    +test($var1)
    +responsive(300)
        display: none
    +responsive
        display: block

And converts them to this (this is postcss-mixins syntax):

.box
    @mixin test $var1 
    @mixin responsive 300 
        display: none
    @mixin responsive
        display: block

Which is then transformed with PreCSS to this CSS:

.box {
    /* test mixin, width-height */
    width: 12px;
    height: 12px;
}
.box div {
    display: block;
}
/* responsive mixin, with default argument 200px */
@media (max-width: 300px) {
    .box {
        display: none;
    }
}
@media (max-width: 200px) {
    .box {
        display: block;
    }
}