Gulp sass not compiling for loop with #{$i} tag

Question

Having a problem with Gulp sass, it's not compiling my file.

Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Code css:

@for $i from 1 through 12 {
    .col-#{$i} {
        -ms-flex-preferred-size: (100% / 12) * $i;
        -webkit-flex-basis: (100% / 12) * $i;
        flex-basis: (100% / 12) * $i;
        max-width: (100% / 12) * $i;
    }
}

Code gulp:

gulp.task( 'sass', function() {
    return gulp.src( SOURCEPATHS.sassSource )
        .pipe( autoprefixer({ browsers: ['last 2 versions']} ) )
        .pipe( sass({ includePaths: ['node_modules'] }, { outputStyle: 'compressed' }).on('error', sass.logError) )
        .pipe( mmq({ log: false }) )
        .pipe( cssmin() )
        .pipe( rename({suffix: '.min'}) )
        .pipe( gulp.dest(APPPATH.css) );
});

Error with this tag #{$i} - without this - gulp compile css file.

There could be a problem? I have read a lot about gulp-postcss - And try with it, but the result is the same - ERROR

Answer 1

.pipe( autoprefixer({ browsers: ['last 2 versions']} ) )

Need to set after sass