How to make friends postcss and scss?

Question

css

I want to make friends postcss and scss. Specifically interested in the work of cssnext.io and scss together.
I use gulp to build. There is a build.scss file that includes all the necessary files:

/* ---------------------- */
/* == Base
/* ---------------------- */
@import "base/_settings.scss";
@import "base/_mixins.scss";
@import "base/_base.scss";
@import "base/reset.min";
@import "base/main.scss";


/* ---------------------- */
/* == States
/* ---------------------- */
@import "states/abstract.scss";


/* ---------------------- */
/* == Layouts
/* ---------------------- */
@import "layouts/header.scss";
@import "layouts/footer.scss";

...

After that, this file can be processed in gulp:

gulp.task('styles:build', function(callback) {
    return gulp.src(params.src.style)
        .pipe(sourcemaps.init())
        .pipe(postcss([
            cssnext
            // plugins
        ], { syntax: syntax }))
        .pipe(rename("styles.css"))
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(params.build.dev.css));
});

The problem is that if you place postcss([cssnext]) before compiling scss, it will only work with the build.scss file, and all included files will not be processed.
And if you place postcss([cssnext]) after compiling scss, then the output css file will be processed correctly, but scss will swear at the syntax of the nextcss functions, for example color(red blackness(80%)) (the function is just taken as an example) .
Can you please tell me how this can be done?

Answer 1

Post css import