sassgruntjsyeomancompass-sassgrunt-contrib-compass

SASS version mismatch between system and grunt-contrib-compass?


I've encountered the following issue with grunt-contrib-sass/compass:

(https://github.com/nex3/sass/issues/746)

Compiling this:

.badge {

    border: 1px solid black;

    &-info {
        background:blue;
    }
}

Errors this:

Sass Error: Invalid CSS after " &": expected "{", was "-info {"
"-info" may only be used at the beginning of a compound selector.

I have the latest SASS version (3.3.7) installed on the system (Ubuntu 12.04.4 LTS), and running scss from the command line on a fresh file with above code DO work.

However creating a fresh project with yo webapp (Yeoman generator-webapp), with Grunt, gives the above error.

Any thoughts?


Solution

  • As @cimmanon kindly commented, this is probably due to version conflict between SASS and Compass.

    As Compass uses it's own version of SASS and I was using grunt-contrib-compass (and not SASS), and my version of Compass was < 1 - the effect was that the 3.3 version I had on my system wasn't used.

    Watch out for that when using out-of-the-box Yeoman generators.