No description or website provided.
JavaScript CSS
Latest commit d9fe8a1 Sep 7, 2016 @akella better regex
Permalink
Failed to load latest commit information.
test add tests Aug 20, 2016
.gitignore replacement code Aug 20, 2016
.travis.yml add tests Aug 20, 2016
LICENSE replacement code Aug 20, 2016
README.md clean up readme Aug 21, 2016
index.js better regex Sep 7, 2016
package.json better regex Sep 7, 2016

README.md

gulp-sass-to-postcss-mixins NPM version Build status

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;
    }
}