Laravel Elixir Sass Compilation -.sass files

Question

I'm more of a fan of the .sass syntax for the .sass syntax (because better, let the war begin!), So I'm trying to use it. However, when trying to compile the .sass file with Elixir, it seems to be trying to use the scss syntax to compile.

 elixir(function(mix) { mix.sass('styles.sass'); }); 

When styles.sass is

 body background: black 

I get the following errors:

 $ gulp [17:54:43] Using gulpfile ~/sites/skynet/gulpfile.js [17:54:43] Starting 'default'... [17:54:43] Starting 'sass'... [17:54:43] Finished 'default' after 185 ms [17:54:43] gulp-notify: [Laravel Elixir] Error: invalid top-level expression [17:54:43] Finished 'sass' after 198 ms 

But by changing styles.sass (keeping the extension .sass ), to

 body { background: black; } 

I get a successful compilation. Is Elixir compiling scss syntax or am I missing any configuration settings? Help rate!

Answer 1

Thanks to @ mul14, I dived deeper into the different libraries that gulp-sass relies on. The github question was a discussion that ultimately led to someone successfully supporting the indentation syntax and merging into libsass.

After looking at the node-sass documentation, I found an option to include indented syntax. Looking at the arguments of Elixir sass ingredients, it worked for me!

 elixir(function(mix) { mix.sass('styles.sass', false, { indentedSyntax: true }); }); 

So in the end it was a configuration problem. Great news for syntax indented users around the world!

Answer 2

This is because Laravel Elixir uses gulp-sass . And inside gulp-sass, it uses node-sass . node-sass use libsass , which does not support .sass file https://github.com/sass/libsass/issues/16

You can use gulp-ruby-sass to compile .sass in css. Or use laravel-elixir-ruby-sass .