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!
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!