calc()中直接写$var会报错，必须用#{$var}显式插值；sass编译器会误判为调用不存在的内置函数而抛出sasserror，正确写法是width: calc(#{$size} + 10px)，确保变量提前展开为合法css值。
calc()里直接写$var会报错，必须用#{$var}显式插值
SCSS的calc()函数本身是CSS原生函数，但Sass编译器在解析时会尝试“接管”它——如果里面出现未插值的SCSS变量（如calc($size + 10px)），Dart Sass会误判为调用Sass内置calc()函数（不存在），直接抛出SassError: Undefined function.或Invalid CSS after "calc("。这不是浏览器报错，而是编译阶段就失败。
正确做法是把所有SCSS变量都包裹进#{} ，让它们提前展开为纯CSS值：
-
width: calc(#{$size} + 10px);✅ 编译后为width: calc(24px + 10px); -
height: calc(#{$base} * 2);✅ 支持乘除运算，但注意单位一致性 - 别在
#{}里再套函数：calc(#{scale($base, 1.5)} + 10px)❌ 若scale()返回带单位的值，可能拼出calc(1.5rem + 10px)——CSS不支持rem与px混算，运行时报无效值
filter、transform等函数中混用SCSS颜色/数值变量也会失效
像filter: invert($color);或transform: translateX($x);这类写法，表面看合理，实则踩了两个坑：一是$color未插值，Sass输出字面量$color，浏览器忽略；二是即使加了#{$color}，invert()只接受number或color，而#{$color}展开后是#3b82f6，没问题；但若$x是24px，#{$x}展开为24px，translateX(24px)合法；可一旦$x: 24（无单位），#{$x}变成24，translateX(24)就无效——CSS要求带单位。
关键检查点：
- 变量是否已定义且类型匹配（颜色变量别传给
blur()，长度变量必须带单位） - 插值后字符串是否构成合法CSS函数参数（
drop-shadow(0 2px 4px #000)✅，但drop-shadow(0 #{$y} 4px #000)❌ 若$y是2px，展开后空格数错会断掉语法 - 避免在
#{}内拼接多个变量：filter: #{'blur(' + $r + 'px)'}❌ 易漏括号或引号；改用单变量+插值更稳
@keyframes里用#{}生成动画名，但漏了@前缀或作用域错误
写@keyframes #{$name} { ... }看似自然，但Sass要求@keyframes这样的at-rule名称必须是标识符，而#{$name}在解析期尚未展开，会被当作非法token，报错Invalid CSS after "@keyframes": expected identifier。
必须确保插值出现在at-rule名称位置，且前面有完整@符号：
-
@keyframes #{$anim} { from { opacity: 0; } }✅ 正确，#{$anim}单独占位 -
@keyframes anim-#{$suffix} { ... }✅ 允许拼接，只要开头是字母或- -
#{$prefix}-fade { ... }❌ 这不是at-rule，是选择器，不能这么用；应写成@keyframes #{$prefix}-fade { ... } - 变量
$anim必须在当前作用域已声明，且值为合法标识符（不能含空格、引号、中文）；$anim: "fade-in"✅，$anim: fade in❌（Sass当减法运算）
插值后CSS函数仍无效，问题常在空格和括号配对
插值本身成功，但最终CSS函数不可用，90%是因为格式被破坏。Dart Sass对#{} 内的空白极其敏感——多一个空格、少一个右括号、换行位置不对，都会导致编译失败或输出残缺值。
典型静默陷阱：
-
box-shadow: #{0 2px 4px rgba(0,0,0,0.1)};❌ 少一个右括号，Sass报错中断 -
background: linear-gradient(to right, #{$c1}, #{$c2});✅ 但若$c1值为空或未定义，输出linear-gradient(to right, , #3b82f6)→ 浏览器跳过整条声明 -
content: "#{$text}";✅，但content: #{"\"" + $text + "\""}❌ 引号嵌套混乱，易产出content: ""hello""; - 末尾分号前有空格：
--val: #{$v} ;→ 某些旧版loader会吞掉空格后的内容，变成--val: ;
真正麻烦的是这些错误不报红，编译通过但样式消失，得靠检查最终CSS文件确认插值结果是否干净、完整、符合CSS语法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
