怎样利用Sass的插值语法动态生成类名_通过#{}符号实现字符串拼接-css教程-PHP中文网

必须用#{}做类名插值当类名的一部分来自变量、函数返回值或计算结果且编译时才能确定，如循环索引、map的key、断点名等；直接写.foo-#{$size}会被当作字面量，而.foo-#{ $size }才展开值，且前后加空格更安全。

$怎样利用sass的插值语法动态生成类名_通过#{}符号实现字符串拼接$

什么时候必须用 `#{}` 做类名插值

当类名的一部分来自变量、函数返回值或计算结果，且这个部分在编译时才能确定（比如循环中的索引、map的key、响应式断点名），就必须用 #{} 。直接写 .foo-#{$size} 会被Sass当作字面量处理，而 .foo-#{ $size } 才会真正展开变量值。

常见错误是漏掉空格：写成 .foo-#{$size} 看似没问题，但若 $size 是 "lg" ，结果是 .foo-lg ；可一旦 $size 是 "2xl" ，没空格反而容易和前缀连成 .foo2xl ——这不是拼错，是Sass把 foo 和 #{ $size } 当作同一标识符前缀了。所以习惯上在 #{} 前后各留一个空格更安全。

只在类名、属性值、选择器中需要动态文本的地方用 #{} ，普通CSS规则里不用
#{} 不能嵌套，比如 #{ #{ $var } } 会报错
如果插值内容含特殊字符（如 /、.），需确保它本身是合法CSS标识符，否则生成的类名无效

`@each` 循环中用 `#{}` 批量生成响应式类

这是最典型的使用场景：遍历断点map，为每个断点生成 .text-xs@sm 、.text-sm@md 这类类名。关键在于把断点名作为插值一部分，而不是硬编码。

$breakpoints: (
  sm: 640px,
  md: 768px,
  lg: 1024px
);

@each $name, $width in $breakpoints {
  @media (min-width: $width) {
    .text-xs#{"@#{$name}"} {
      font-size: 0.75rem;
    }
    .text-sm#{"@#{$name}"} {
      font-size: 0.875rem;
    }
  }
}

注意这里用了双层插值：#{"@#{$name}"} 。外层 #{} 表示字符串拼接，内层 #{$name} 展开变量。如果只写 @#{$name} ，Sass会尝试解析为伪类或属性，报错。

不要在 @media 外直接写带 #{} 的顶层类名，否则生成的CSS选择器可能无效（如 .foo#{ $x } 编译后是 .foo 后跟未闭合的括号）
若断点名含破折号（如 "max-sm" ），插值后类名会是 .text-xs@max-sm ，浏览器能识别，但部分CSS工具链可能警告

用 `#{}` 拼接函数返回值时的类型陷阱

Sass函数（比如 str-slice() 、percentage() ）返回值不全是字符串。如果直接插进类名，可能出错：

比如想截取颜色变量名后三位做类名后缀：$color-name: "primary" ，写成 .bg-#{ str-slice($color-name, -3) } 看似合理，但 str-slice 返回的是字符串，没问题；而如果误用 percentage(0.5) ，它返回的是带单位的 50% ，插进类名就变成 .bg-50% —— 这不是合法CSS类名。

插值前用 type-of() 检查返回值类型，非字符串时先转：#{ "" + percentage(0.5) } 或 #{'' + percentage(0.5)}
避免对 map-get() 结果直接插值，除非确认值是字符串；否则加一层 inspect() 或 "" + 转换
#{} 不会自动去除引号，#{ "foo" } 结果是 foo （无引号），但 #{ 'foo' } 也一样——单双引号在插值中无区别