Why use @define-mixin and @mixin to replace @mixin and @include in sass?

[linxixuan]

We use @mixin to declare a mixin and @include to use. When I move node-sass to post-css, the mixin can't parse until I change @mixin to @define-mixin.

Why do that? It seem to be not convenient for me.

base.scss

.nav-activity {

    @mixin ui-icon($icon, $image) {
        .ui-icon-#{$icon} {
            background: image-url('/' + $image + '.png') no-repeat;
        }
    }
    @include ui-icon('a', 'b');
}

gulpfile.js

var gulp = require('gulp');
var postcss  = require('gulp-postcss');
var scss = require('postcss-scss');
var autoprefixer = require('autoprefixer');

gulp.task('sass', function(){
    var processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        autoprefixer({browsers: ['ChromeAndroid > 1', 'iOS >= 4', 'ie > 6', 'ff > 4']}),
        require('postcss-easings')
    ];

    gulp.src('./base.scss')
        .pipe(postcss(processors, {parser: scss}))
        .pipe(gulp.dest('./dist'));
});

Console

$ gulp sass
[17:20:24] Using gulpfile ~/tmp/postcss/gulpfile.js
[17:20:24] Starting 'sass'...
[17:20:24] Finished 'sass' after 125 ms

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: postcss-mixins: /Users/linxixuan/tmp/postcss/base.scss:30:5: Undefined mixin ui-icon
    }
    @mixin ui-icon $icon, $image {
    ^
        .ui-icon-$(icon) {

[ai]

There is no way to process Sass in PostCSS anyway. We have different math and variables syntax.

So we are free to fix Sass mistakes. Sass mixins keywords are bad:

1. Including mixin keyword is most popular, so it should be shorter
2. @include is long, but also it is not clear. What exactly we include?

[realalexhomer]

Could you consider putting an option in to make it so that we can use the normal syntax if we want? My whole team is very used to using the old syntax and it will make them annoyed with me when we switch to postcss to have to relearn things like this. It will also completely break backwards compatibility with all of our projects current using scss.

If you don't feel like doing this I could also submit a PR if you want.

Thanks

[ai]

@realalexhomer PostCSS is modular. So this difficult questions can be solved by having two plugins.

Here is special plugin for Sass keywords: https://github.com/andyjansson/postcss-sassy-mixins