SASS为BEM语法抛出错误

Question

我只是想在SASS中使用“修饰符”和“元素”BEM语法。

.second-title{
   background-color:green;

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

  &__left{
   background-color:red;
  }
}

CSS文件正确编译但是当我尝试运行“grunt serve”罗盘时会抛出以下错误：

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

为了以这种方式使用父选择器，您需要使用Sass 3.3：

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

如果您使用的是旧版本，请尝试以下操作：

$module: 'second-title';

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

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

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