Sass混合宏用变量替代类报错：赋值语句中$selector后需加冒号

这个错误的根源很明确——你在Sass混合宏里直接用$selector作为选择器时，没遵循Sass的插值语法规则，同时属性的写法也不符合CSS的基本规范。让我帮你修正并解释清楚：

错误原因拆解 #

1. 选择器变量未使用插值：Sass不会自动把变量识别为选择器，必须用#{$变量名}的插值语法，才能将变量值转化为合法的CSS选择器。
2. 属性写法不规范：CSS属性之间需要用分号分隔，且必须包裹在选择器的{}代码块内，你之前的写法缺少这些必要结构。

修正后的混合宏代码 #

@mixin clip-path($selector, $color) {
  // 特性检测：仅当浏览器支持display:flex时生效
  @supports (display: flex) {
    // 用插值语法将变量转为合法选择器
    #{$selector} {
      background: $color;
      display: flex;
    }
  }
}

如何使用这个混合宏 #

你可以传入任意合法的CSS选择器字符串和颜色值，比如：

// 给.card类添加样式
@include clip-path('.card', #ff4433);
// 给#header ID添加样式
@include clip-path('#header', rgba(0,0,0,0.8));

编译后的CSS输出 #

以上示例会被编译为：

@supports (display: flex) {
  .card {
    background: #ff4433;
    display: flex;
  }
}
@supports (display: flex) {
  #header {
    background: rgba(0, 0, 0, 0.8);
    display: flex;
  }
}

额外注意事项 #

• 确保传入的$selector是合法的CSS选择器字符串，比如.class、#id、div、ul li等都可以正常使用
• 如果需要处理带伪类/伪元素的选择器，比如.btn:hover，直接把完整字符串传入即可，插值语法会正确解析

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