SCSS编写BEM命名子元素选择器报错，如何实现目标CSS输出？

嘿，我来帮你搞定这个SCSS的报错问题！先理清楚你的需求和问题根源：

需求回顾 #

• 你的HTML结构：

  <div class="nav"> <a class="nav__link">click here...</a> </div>
  

• 想要生成的目标CSS：

  a.nav__link { text-decoration: none; }
  

• 你原来写的SCSS代码报错了：

  .nav { a&__link { text-decoration: error; } }
  

  报错原因是SCSS不允许在&前面加其他选择器直接拼接，&只能作为复合选择器的开头。

两种正确的解决方案 #

方案1：直接编写目标选择器（最简单直观） #

如果不需要嵌套结构，直接写出最终的目标选择器就行，编译后完全符合你的需求：

a.nav__link {
  text-decoration: none;
}

编译输出的CSS就是你想要的：

a.nav__link {
  text-decoration: none;
}

方案2：嵌套写法（利用SCSS插值语法） #

如果你一定要在.nav的嵌套块里编写，可以用SCSS的插值语法（#{$&}）来引用父选择器的内容，这样后续如果父类名有修改，不用手动改两次：

.nav {
  a.#{$&}__link {
    text-decoration: none;
  }
}

这里的#{$&}会被编译成父选择器的内容.nav，最终输出的CSS和目标完全一致。

为什么原写法会报错？ #

原代码里的a&__link是无效的SCSS语法：

• &在SCSS中代表当前父选择器的完整内容（这里就是.nav），它只能作为复合选择器的起始部分（比如&__link会编译成.nav__link）。
• 你把&__link放在了a后面，违反了SCSS的语法规则，所以才会出现"&__link仅可用于复合选择器的开头"的报错提示。

内容的提问来源于stack exchange，提问作者Sushmit Sagar