SASS renvoie une erreur pour la syntaxe BEM

Question

J'essaie simplement d'utiliser la syntaxe BEM "modificateur" et "élément" dans SASS.

.second-title{ 
    background-color:green; 

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

    &__left{ 
    background-color:red; 
    } 
} 

Le fichier CSS compile correctement, mais lorsque je tente de courir « grunt servir » boussole jette l'erreur suivante:

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

Pour utiliser le sélecteur de parent de cette façon, vous devez utiliser Sass 3.3:

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

Si vous êtes coincé avec une ancienne version, vous pouvez essayer ceci:

$module: 'second-title'; 

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

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

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