Sass中类名插值必须在@each、@mixin或嵌套规则内使用，不可在顶层直接#{$var}拼接；双层插值#{"@#{$name}"}用于生成含@符号的响应式类名；插值结果不支持@extend动态引用且不可调试。
不能直接在顶层用 #{$var} 拼类名，否则编译出的选择器可能带未闭合括号或非法结构；必须配合 @each、@mixin 或作用域控制来确保插值发生在合法上下文中。
类名插值必须嵌套在规则或循环内
写 .foo#{$suffix} 在顶层（即不在选择器块、@mixin 或 @each 体内）会导致 Sass 把它当无效语法处理，尤其当 $suffix 是空或含特殊字符时，输出可能是 .foo 后跟乱码甚至编译失败。
- ✅ 正确：在
@each中拼接，如@each $name, $width in $breakpoints { .text-xs#{"@#{$name}"} { ... } } - ✅ 正确：封装进
@mixin，变量作用域清晰，如@mixin gen-class($base, $mod) { .#{$base}-#{$mod} { ... } } - ❌ 错误：直接写
$class: "btn"; .#{$class}-primary { color: blue; }—— 看似可行，但若$class未定义或为空，会静默产出.-primary这类非法选择器
双层插值 #{"@#{$name}"} 是断点类名的刚需
想生成 .text-sm@md 这种带 @ 符号的响应式类名，单层 @#{$name} 会被 Sass 解析为伪类（如 @md → :md），报错 Invalid CSS: was expecting a pseudo-class or pseudo-element。
- 必须用外层
#{"..."}强制转为字符串，内层#{$name}展开变量，即#{"@#{$name}"} -
@不是 Sass 特殊字符，但它是 CSS 伪类前缀，Sass 会优先按伪类解析，所以得“包一层”绕过解析逻辑 - 破折号命名如
"max-sm"插值后生成.text-xs@max-sm，浏览器能识别，但某些 Lint 工具（如 stylelint）可能警告“selector-no-unknown”
变量类型和拼接空格是隐形雷区
插值只做字符串拼接，不校验合法性，也不自动加连字符或去空格。拼出来 .btn primary（中间有空格）或 .123-mod（数字开头）这类选择器，CSS 会直接忽略，且 Sass 不报错。
- 连字符必须显式写出：
.btn-#{$type}✅，.btn #{$type}❌（空格变后代选择器） - 变量值含空格或引号需提前清理，比如
$type: " hover "→.btn- hover，应改用str-trim($type)或手动约束输入 - 数字键 map 值可不加引号，但字符串键必须引号包裹，否则
(sm: 0.5rem, max-sm: 1rem)中max-sm会被当减法运算，报错Undefined variable "max"
插值生成的类名无法被 @extend 动态引用
@extend 接收的是字面量选择器名，不支持运行时拼接。写 @extend .btn-#{$state} 会报错 Invalid CSS after "@extend .btn-": expected "}", was "#{$state}"。
- ✅ 可行：用插值生成占位符，再
@extend它，如%btn-#{$state} { ... }+.primary { @extend %btn-primary; } - ✅ 可行：把所有可能状态预定义成占位符 map，用
@each批量生成，避免动态@extend - ❌ 不可行：任何试图在
@extend右侧放#{$x}的写法，Sass 编译器在语法分析阶段就拒绝
最易被忽略的是：插值结果不可调试。一旦生成 .u-mt-#{$size}，你没法在浏览器开发者工具里搜 mt- 精准定位——因为 $size 已在编译期展开为具体值，源码和产物完全脱钩。真要兼顾灵活性与可维护性，建议把高频组合（如 sm/md/lg）固化为变量，而非全靠插值推导。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
