Sass布尔变量仅在编译期生效，需重新编译才更新CSS；必须前置声明、避免字符串误赋值，推荐用@function封装逻辑，且无法实现运行时切换。
如何用Sass的$enable-flex这类布尔变量控制样式生成
直接说结论：Sass本身不运行时求值，布尔变量只在编译期起作用；它不是CSS的“开关”，而是编译流程的条件分支。你改了$enable-flex，必须重新编译才能生效，浏览器里改不了。
典型用法是定义全局开关变量，配合@if做块级条件编译：
$enable-flex: true;<br>foo {<br> @if $enable-flex {<br> display: flex;<br> } @else {<br> display: block;<br> }<br>}
-
$enable-flex必须在@if前声明（顺序敏感），且不能是!default后被覆盖却未重编译的旧值 - 别用
#{}拼接布尔值进属性值——display: #{$enable-flex ? 'flex' : 'block'}会报错，Sass不支持三元运算符用于属性值插值 - 如果变量来自外部配置（如
@import 'config'），确保路径正确、无循环依赖，否则@if可能读到null导致编译失败
为什么@debug $flag输出true，但@if $flag没进分支
常见原因是变量类型不对：$flag: "true"（字符串）或$flag: 1（数字）在@if里都算true，但如果你写的是$flag: 'false'，它仍是真值——Sass里只有null、false和空列表是假值。
- 检查是否误用了引号：
$flag: false✅，$flag: "false"❌ - 避免从
map-get()取值后未判空：$val: map-get($config, 'flex');→ 若键不存在，返回null，@if $val直接跳过 -
@debug会把所有值转成字符串输出，看起来像true，但实际类型可能是字符串，得用type-of($flag) == 'bool'确认
多个开关组合时，@if嵌套太深怎么破
别硬套@if @else if @else，优先用@function封装逻辑判断，让样式层保持干净。
立即学习“前端免费学习笔记（深入）”；
@function should-use-grid($conf) {<br> @return map-get($conf, 'grid') and not map-get($conf, 'legacy-support');<br>}<br><br>.card {<br> @if should-use-grid($config) {<br> display: grid;<br> }<br>}
- 函数内可复用
and/or/not，比多层@if易读、易测 - 传入
map比一堆独立变量更可控，避免命名污染，也方便单元测试（用@test框架跑断言） - 注意函数返回值必须是Sass原生类型，不能返回CSS字符串再拼接——那会破坏编译时静态分析
构建工具里动态切换开关，为什么CSS没更新
根本原因：Sass编译是一次性过程。Webpack/Vite的sass-resources-loader或dart-sass CLI不会监听变量文件变更并热重编译样式块——它只监听@import链上的Sass文件。
- 把开关变量放在单独的
_flags.scss里，并确保所有用到它的文件都@import '_flags'（路径要对） - 开发时改了
_flags.scss，必须触发完整重编译；Vite用户可加server.watch配置，但 Dart Sass 默认不支持文件级增量编译 - CI/CD中若用
npm run build，确保环境变量（如NODE_ENV=production）没意外覆盖$enable-xxx的赋值逻辑
最易忽略的一点：布尔开关只影响编译输出，不产生运行时CSS规则。想实现浏览器内开关，得用JS操作class或CSS自定义属性，Sass做不到。
