Laravel Elixir Sass Compilation - .sass files

Question

I'm a bigger fan of .sass syntax over the .scss syntax (because it's better, let the war begin!), so that's what I'm trying to use. When trying to compile a .sass file with Elixir, however, it seems to be trying to use 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 changing styles.sass (still keeping the .sass extension), to

body {
  background: black;
}

I get a successful compilation. Does Elixir only compile scss syntax or am I missing some sort of config setup? Help much appreciated!

Intelligent

After some experimentation, I found that it only compiles assets in the sass directory using .scss syntax. Boy that's confusing! One would expect a sass directory to contain .sass files and vice versa... – Intelligent

Answer 1

Thanks to @mul14, I looked deeper into the different libraries that gulp-sass relies on. The issue on github was a discussion that eventually led to someone successfully supporting the indentation syntax and it getting merged into libsass.

After looking into node-sass's documentation, I found an option for turning on indented syntax. Looking at Elixir's sass ingredient arguments, this worked for me!

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

So, in the end it was a config issue. Great news for indented syntax users around the globe!

Intelligent

Answer 2

That's because Laravel Elixir use gulp-sass. And the inside of gulp-sass it use node-sass. The node-sass use libsass, which is does not support .sass file https://github.com/sass/libsass/issues/16

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

Huggermugger

That issue on github was hard to follow... At the beginning people want sass support, at the end github.com/sass/libsass/issues/16#issuecomment-45261578? Didn't it get merged in? – Intelligent