Error when escaping liquid (gulp-sass, shopify)

Question

I'm trying to escape liquid syntax with interpolate (#{' '}) but i'm getting this error:

[22:07:05] Starting 'scss'...
[22:07:05] Finished 'scss' after 9.77 ms
[22:07:05] [gulp-sass] stylesheets/main.css
527:10  Invalid CSS after "  color: {": expected "}", was "ttings.color-te..."

When i remove all the liquid syntax from the code, the task runs perfectly. This is the scss task:

var gulp = require('gulp');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var rename = require("gulp-rename");
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('scss', function() {
    gulp.src('stylesheets/*.scss')
      .pipe(sass({ includePaths : ['./stylesheets/**/*.scss'] }))
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.init())
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(cssnano())
    .pipe(rename({ suffix: '.min.css', extname: '.liquid' }))
    .pipe(gulp.dest('./assets'));
  });
  gulp.task('watch', function() {
     gulp.watch('stylesheets/**/*.scss', ['scss']);
  });

If i remove this part >

 .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.init())
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(cssnano())

the task runs fine, but with problems to upload to shopify (Error invalid upload request! ) ... I`m using shopify-upload in another task too.

Answer 1

Remove 'autoprefixer' and/or 'cssnano'

Answer 2

You can't use gulp-saas to extrapolate liquid syntax, it will only parse sass files.

If you want to parse liquid files, you can use gulp-liquify before compiling you sass files.