Sass文件中含$字符的CSS选择器编译报错解决方法

当你在Sass中直接使用[class$="9"]这类包含$的属性选择器时，Sass会将$识别为变量前缀，导致编译报错。你可以通过以下两种方式解决：

• 方法一：使用转义字符
  给$添加反斜杠转义，让Sass将其视为普通字符：

  [class\$="9"]:after {
      background-color: #3d9970 !important;
  }
  

• 方法二：使用Sass插值语法
  把$包裹在#{}中，强制Sass将其作为普通文本解析：

  [class#{$}="9"]:after {
      background-color: #3d9970 !important;
  }
  

两种方法都能让Sass正确编译出目标CSS代码，最终生成的CSS都会是你原本期望的[class$="9"]:after样式。

内容的提问来源于stack exchange，提问作者Saeid Dadkhah