如何利用Sass的插值语句#{}动态生成CSS选择器_实现动态类名-css教程-PHP中文网

Sass中插值#{}不能直接用于选择器开头，必须前置固定符号（如.、#）且不可用+拼接；正确方式是@at-root配合已知前缀使用，或封装为带校验的mixin。

$如何利用sass的插值语句#{}动态生成css选择器_实现动态类名$

插值语句 `#{}` 不能直接拼接选择器主体

很多人以为写 .class-#{$suffix} 就能生成 .class-header 这类动态类名，但 Sass 在编译期会报错：「Invalid CSS after “.class-”: expected class name」。这是因为 Sass 要求选择器开头必须是合法标识符（如字母、下划线），而 #{$suffix} 在解析阶段尚未展开，Sass 不允许它作为选择器的“起始部分”参与语法分析。

必须用 `@at-root` + `&` 配合插值才能安全生成嵌套类名

真正可行的方式是把插值放在已存在的选择器内部，借助 & 引用父级，并用 @at-root 提升作用域。否则插值只会被当作普通字符串字面量处理，无法形成有效 CSS 规则。

常见错误写法：

@each $type in (primary, secondary, success) {
  .btn-#{$type} { color: red; } // ❌ 编译失败
}

正确写法：

@each $type in (primary, secondary, success) {
  @at-root .btn-#{$type} {
    color: map-get($colors, $type);
  }
}

@at-root 让规则脱离当前嵌套上下文，避免生成类似 .parent .btn-primary 的意外结构
#{$type} 此时处于选择器中间位置（前有固定字符串 .btn-），Sass 允许展开
若需带命名空间或 BEM 格式，可写成 .#{$ns}#{$sep}#{$block}#{$sep}#{$element}，但所有前置固定部分（如点号、连字符）必须显式写出

插值在属性值里完全可用，但在选择器里受语法约束

别混淆使用场景：#{} 在声明块内（如 content: "#{$value}" 或 background: $color-map.#{$key}）是自由的；但一旦进入选择器位置，就受限于 CSS 语法和 Sass 解析阶段的校验逻辑。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

这些写法都合法：

$prefix: "icon";
.#{$prefix}-home { display: inline-block; }
@for $i from 1 through 3 {
  .col-#{$i} { width: 100% / $i; }
}

但这些会失败：

#{$prefix}-item { ... } // ❌ 缺少点号，不是合法类选择器
.#{$prefix + "-item"} { ... } // ❌ + 操作符在选择器中不被支持

Sass 不支持在选择器中做字符串拼接运算（+、str-slice 等函数均无效）
变量必须是纯字符串，且前面要有明确的 CSS 选择器符号（.、#、[attr= 等）
若变量含空格或特殊字符（如 $name: "my class"），插值后会导致 CSS 语法错误，务必提前清理

动态类名更适合用 `@mixin` 封装 + 参数校验

直接裸写 @each + @at-root 容易失控，尤其当类名来源来自 map 或外部配置时。更稳健的做法是封装成 mixin，加入类型判断和 fallback。

@mixin gen-button-classes($map: $button-colors) {
  @if type-of($map) == 'map' {
    @each $type, $color in $map {
      @at-root .btn-#{$type} {
        background-color: $color;
        &:hover { background-color: darken($color, 10%); }
      }
    }
  } @else {
    @warn "Expected a map for button colors, got #{type-of($map)}";
  }
}