scss中null是合法值类型，不会被自动过滤，必须显式用@if $var != null拦截，否则输出border-radius: null;等无效css；精准识别null需用meta.type-of($var) == 'null'。
SCSS中null值不会被自动过滤，必须显式用@if拦截
SCSS编译器对null不做特殊处理——它会原样输出为null字符串，比如border-radius: null;。浏览器忽略该行，但CSS体积变大、可读性下降，且可能干扰调试。这不是bug，是设计行为：Sass把null当做一个合法值类型，而非“不存在”。
常见错误现象：@include button($border-radius: null)后生成了border-radius: null;，DevTools里这条规则灰掉，但你得手动点开才看到。
-
@if $border-radius != null是最简拦截方式，但注意：它无法区分null和空字符串'' - 若变量可能为
''（如用户输入的字符串配置），需加and $border-radius != '' - 对数字型变量（如
0、0px），不要加!= ''判断，否则0会被误判为“空”而跳过
variable-exists()和meta.type-of()的区别很关键
variable-exists(border-radius)只检测变量是否**声明过**，哪怕你写了$border-radius: null;，它也返回true。所以不能靠它判断“有没有有效值”。
真正识别null要用meta.type-of($border-radius) == 'null'——这是唯一能精准捕获未赋值或显式设为null的写法。
- 在Dart Sass中必须先
@use "sass:meta";才能用meta.type-of - 旧版LibSass不支持
meta模块，若项目还在用Node Sass，只能退回到$var != null and $var != ''兜底 - 别混用：
not $var在SCSS里会把0、false、''全判为真，不可靠
map-get()返回null时，@if判断容易漏掉
从配置map里取值，比如map-get($config, 'radius')，如果key不存在，结果就是null。这时候直接@if map-get($config, 'radius') { ... }会进入分支——因为@if null在SCSS里判定为true（和JS不同）。
这会导致border-radius: null;被意外输出。
- 安全写法：
@if map-has-key($config, 'radius') and map-get($config, 'radius') != null -
map-has-key()防报错（key不存在时不崩溃），!= null防无效值 - 别省略
map-has-key()——否则map-get()在key不存在时返回null，和“key存在但值为null”无法区分
插值#{$var}遇到null会输出空字符串，但不报错
在CSS自定义属性里用--radius: #{$border-radius};，如果$border-radius是null，结果是--radius: ;（空值）。浏览器虽不报错，但这个属性等于没定义，后续var(--radius)会回退到默认值，逻辑可能断裂。
- 插值本身不触发
@if，所以必须在外层判断：@if $border-radius != null { --radius: #{$border-radius}; } - 不能依赖插值“自动跳过”，
#{}只是字符串拼接，不是条件渲染 - 同理，
#{rgba($color, $alpha)}里任一参数为null，整个插值结果为空，且无提示
最易被忽略的是：SCSS里null既不是false也不是“不存在”，它是一个独立值类型；所有基于它的判断都必须显式写出，没有隐式过滤。写@if $x或直接#{$x}都不够，得盯住每个使用点补上!= null。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
