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

Question

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?

Answer 1

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.

Answer 2

So when compiling this with 3.3.6 of SASS I get:

.badge {
  border: 1px solid black;
}
.badge-info {
  background: blue;
}

But with 3.2.19 I get the same error you do:

Invalid CSS after "    &": expected "{", was "-info {"

"-info" may only be used at the beginning of a compound selector.

There's a rather involved history to using suffixes this way, see: A Change in Plans for Sass 3.3

So you have a SASS version problem somewhere in your toolchain.