Sass 的 @if 只在编译时执行，无法读取 CSS 自定义属性（如 --theme），因其值在运行时才存在；正确用法是构建时注入变量或运行时 JS 控制，且 @if 判断需确保变量已声明、类型匹配、字符串加引号、逻辑表达式加括号。
Sass 的 @if 无法读取或响应 CSS 自定义属性（如 --theme），它只在编译时起作用，不是运行时逻辑。 所有“根据页面当前主题色动态切换样式”的需求，如果写成 @if $theme == "dark"，前提是 $theme 是一个 Sass 变量，且值在编译前就已确定；它永远看不到 :root 里设置的 --theme: dark。
为什么 @if 判断 --color 总是不生效
因为 Sass 编译发生在浏览器加载任何 HTML/CSS 之前。--color 是 CSS 运行时变量，Sass 解析器连它的存在都感知不到——它只会把 var(--color) 当作普通字符串字面量处理，不会求值，也不会触发类型转换。
- 典型误用：
@if $mode == var(--mode) { ... }→ 报错：Undefined variable$mode，或直接忽略整个块 - 正确路径：把主题决策权交给构建阶段（如通过 Webpack DefinePlugin 注入
$theme: "dark"）或运行时 JS（切换 class + 预置好两套 CSS 规则） - 混淆点：
$primary（Sass 变量）和--primary（CSS 变量）完全独立，无自动同步机制
怎么用 @if 实现真正的条件编译（比如多端差异化）
真正可行的场景是：构建时就知道目标平台，比如 uni-app 的 H5 / 小程序 / App 端，或不同客户定制版。这时 @if 配合外部注入的变量能稳定生成不同 CSS。
- 不要在
uni.scss里写#ifdef MP-WEIXIN—— 它被 Sass 单独处理，条件编译指令早被跳过 - 正确做法：在
App.vue的中用#ifdef导入平台专属变量文件，再用@if做细粒度控制 - 示例：
@import './vars/weixin.scss';后，@if $platform == "weixin" and $enable-payment { .btn-pay { display: block; } } - 关键：所有参与
@if判断的变量，必须在该文件作用域内已声明且非null或未定义
@if 判断字符串、布尔值、空值时的易错点
Sass 的“真值”规则和 JS 不同，且字符串比较必须加引号，否则会被解析为变量名。
-
@if $size == "lg"✅；@if $size == lg❌（报Undefined variable: "lg"） -
@if $border-radius == null✅ 检查是否未设圆角；但@if $border-radius对0、""、()全部返回 true -
and/or要加括号包裹子表达式：@if ($size == "lg") and ($theme == "dark")，漏括号会导致解析失败 - 调试建议：在
@if前加@debug $theme;，确认值和类型（string还是bool）
最常被忽略的是变量作用域和覆盖顺序：@use 引入的模块变量需用命名空间调用，!default 只在首次赋值时生效——这些细节一旦出错，@if 就像在判断一个根本不存在的值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
