9

Libsass 2.0 brought the indented syntax to libsass users, but so far I've been unable to make it work with node-sass and gulp-sass. I have all of the latest versions:

node-sass: 0.93
gulp-sass: 0.7.2
gulp: 3.8.2

This setup compiles .scss files and even .sass files using the bracket syntax but it will not compile the indented syntax. Has anyone successfully compiled the indented syntax with node-sass and gulp?

My gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
    return gulp.src('./sites/all/themes/nsfvb/sass/screen.sass')
        .pipe(sass({
            includePaths: require('node-neat').includePaths,
            errLogToConsole: true
        }
        ))
        .pipe(gulp.dest('./sites/all/themes/nsfvb/css'));
});

gulp.task('watch', function() {
    gulp.watch('./sites/all/themes/nsfvb/sass/*.sass', ['sass']);
});

gulp.task('default', ['sass', 'watch']);


Error when running the default task

error: invalid top-level expression

3
  • Your answer should be on: https://github.com/sindresorhus/grunt-sass/issues/41. It's a known message. Commented Jun 25, 2014 at 19:06
  • 1
    I'm trying to figure this out too....
    – pyronaur
    Commented Jun 27, 2014 at 10:38
  • @Navelpluisje fyi, this isn't a syntax error, I've tested it with just one line of code. It compiles with the curly braces and doesn't compile with the indented syntax.
    – jsheffers
    Commented Jun 27, 2014 at 13:56

2 Answers 2

15

Updated answer:

If you want to use the indented syntax (.sass) as the top level file, use sass({indentedSyntax: true}).

sass({indentedSyntax: true})

Outdated answer

Answer found here: https://github.com/dlmanning/gulp-sass/issues/55#issuecomment-50882250

With default settings compiling sass files doesn't work. However there is a workaround. If you pass sourceComments: 'normal' as parameter the compilation work. The reason for this is that there is a strange condition which change how file are handled: https://github.com/dlmanning/gulp-sass/blob/master/index.js#L23-L27

Code example found here: https://github.com/chrisdl/gulp-libsass-example/blob/master/gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

// Run with "> gulp sass" in terminal.
gulp.task('sass', function () {
gulp.src('./sass/main.sass')
    .pipe(sass({sourceComments: 'normal'}))
    .pipe(gulp.dest('./css'));
});

Notice

If you run into issues using this snippet take a look at the following quote and issue.

Using this workaround will result in any changes to the file content from earlier in the gulp pipeline (e.g. earlier plugins) being discarded - JMM

https://github.com/dlmanning/gulp-sass/issues/158

2
  • 1
    FYI, using that workaround will result in any changes to the file content from earlier in the gulp pipeline (e.g. earlier plugins) being discarded. See dlmanning/gulp-sass#158.
    – JMM
    Commented Jan 2, 2015 at 21:53
  • it works! but can be optimized. uselessly shows comments Commented Jun 4, 2019 at 20:02
1

Just to update this answer, the documentation for gulp-sass now says:

If you want to use the indented syntax (.sass) as the top level file, use sass({indentedSyntax: true}).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.