SASS爲BEM語法拋出錯誤

Question

我只是想在SASS中使用「修飾符」和「元素」BEM語法。

.second-title{ 
    background-color:green; 

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

    &__left{ 
    background-color:red; 
    } 
} 

的CSS文件編譯正確，但是，當我嘗試運行「咕嚕服務」指南針引發以下錯誤：

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

爲了使用父選擇這種方式，你需要使用薩斯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; 
}