SASS throws an error for BEM syntax

Question

I'm just trying to use the "modifier" and "element" BEM syntax in SASS.

.second-title{
   background-color:green;

  &--touched{
    background-color:black;
  }

  &__left{
   background-color:red;
  }
}

The CSS file compiles correctly but when I try to run "grunt serve" compass throws the following error:

Syntax error: Invalid CSS after \" &-\": expected number or function, was \"-touched{\"\A on line 71 of D:/webdev/angularjs/ang-snapscan/app/styles/mobilestyle.scss";

Answer 1

In order to use the parent selector this way, you need to use Sass 3.3:

http://thesassway.com/news/sass-3-3-released#parent-selector-suffixes

If you're stuck using an older version, you could try this:

$module: 'second-title';

.second-title {
   background-color:green;
}

.#{$module}--touched{
  background-color:black;
}

.#{$module}__left{
 background-color:red;
}