SCSS插值#{}仅在属性值位置有效，禁用于选择器、媒体查询语句或函数名；内部须语法正确、变量拼写无误；calc()中需保留运算符空格；末尾分号前不可有空格，字符串值须加引号。
SCSS插值 #{} 不是“写上就灵”的万能胶，失效时往往不报错，只静默输出空值或非法字符串，最终CSS解析失败——必须从语法结构、上下文位置、空格细节三方面逐层排查。
插值只能用在属性值位置，不能塞进选择器或函数参数里
很多人以为#{} 能到处用，结果在@media 条件、filter 函数或url() 里硬套，直接导致编译中断或生成无效CSS。
-
@media (max-width: #{$breakpoint})✅ 合法：插值在媒体查询值位 -
@media #{$query}❌ 失效：Sass不支持插值整个媒体查询语句 -
filter: blur(#{$radius}px);✅ 合法 -
filter: #{$filter};❌ 失效：Sass无法将变量名转为合法filter函数调用 -
background: url(#{$img-path});✅ 合法（路径需带引号或确保无空格） -
.#{$class-name}✅ 合法（用于动态类名），但.#{$prefix}-btn必须写成.#{$prefix}-btn，不能加空格
插值内部不能有未闭合括号或拼错变量名
插值块#{} 是Sass的字符串拼接入口，一旦内部语法出错，Sass不会提示“括号没配对”，而是直接跳过整条声明，或输出--color: ; 这种空值，浏览器静默忽略。
-
--shadow: #{drop-shadow(0 2px 4px rgba(0,0,0,0.1)};❌ 少一个右括号 → 编译报错，中断整个文件 -
--color: #{$prmiary};❌ 变量名拼错 → 输出--color: ;，DevTools里完全看不到该自定义属性 -
--size: #{$size}px;✅ 正确，但若$size本身是1rem，则变成--size: 1rempx;→ 单位连写，无效 - 插值后补单位要谨慎：
#{$val}rem比#{$val}rem更安全（注意空格），否则易与变量名粘连
calc()里插值必须带空格，且运算符两侧不能紧贴
很多人以为calc() 是纯CSS的事，Sass不管，其实Sass负责生成合法字符串。插值若不配合空格规范，输出的calc(100%-20px) 会被浏览器直接丢弃。
立即学习“前端免费学习笔记（深入）”；
-
width: calc(100% - #{$gap});✅ 输出calc(100% - 20px)，浏览器识别 -
width: calc(100%-#{$gap});❌ 输出calc(100%-20px)，浏览器报invalid value -
margin: calc(#{$gap} / 2);❌ Sass会尝试执行除法，若$gap含单位可能报错；应改用calc(#{$gap} / 2)或#{math.div($gap, 2)} - 乘法同理：
width: calc(#{$w} * 2);✅，但width: #{$w} * 2;❌（这不是calc，浏览器不认）
末尾空格和分号位置会影响插值输出
旧版Webpack或自定义Sass Loader对空白字符敏感，#{$var} 后面多一个空格，可能被吞掉分号，导致属性值截断，调试时极难定位。
-
--color: #{$c};✅ 标准写法 -
--color: #{$c} ;❌ 分号前空格 → 某些loader输出--color: #f9fafb（缺分号），整行失效 -
--color:#{$c};❌ 冒号后无空格 → 虽然多数loader容忍，但部分CI环境会警告或截断 -
content: "#{$text}";✅ 字符串值需引号包裹，否则空格、括号等特殊字符会破坏CSS结构
真正麻烦的不是#{} 本身难写，而是它看起来像“兜底方案”，让人忽略它背后严格的字符串拼接逻辑——只要输出的CSS字符串非法，浏览器就当它不存在，而Sass又不报错，只剩开发者对着空白的Styles面板发呆。
