SASS抛出BEM语法的错误 [英] SASS throws an error for BEM syntax

问题描述

我只是想在SASS中使用modifier和elementBEM语法。

  .second- title {
 background-color：green; 
 
&  -  touching {
 background-color：black; 
} 
 
& __ left {
 background-color：red; 
} 
} 
  

CSS文件正确编译，但当我尝试运行grunt serve罗盘会引发以下错误：

 语法错误：\& -\后的CSS无效：期望的数字或函数，是\-touched {\\A在D第71行：/webdev/angularjs/ang-snapscan/app/styles/mobilestyle.scss; 
  

解决方案

为了使用父选择器，需要使用Sass 3.3： p>

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

如果您使用的是旧版本，您可以尝试：

  $ module：'second-title'; 
 
。 {
 background-color：green; 
} 
 
。＃{$ module}  -  touching {
 background-color：black; 
} b 
 $ b。＃{$ module} __ left {
 background-color：red; 
} 
  

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";

解决方案

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;
}

这篇关于SASS抛出BEM语法的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！