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.
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
:
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/'));
});
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;
}
}