type-of()仅在scss编译期检查静态变量类型，返回"number""string"等字符串；不识别css自定义属性、单位子类型或运行时值，需配合unit()等函数做二次判断。
type-of() 只能在 SCSS 编译期起作用，无法检查 CSS 自定义属性（--foo）的类型——它压根不认那些运行时才存在的值。
type-of() 能做什么、不能做什么
它返回一个字符串，比如 "number"、"string"、"color"、"list"、"map"、"null" 或 "bool"。但注意：
- 它只处理编译期已知的静态值，比如
$size: 16px；对var(--size)完全无感 -
type-of(12px)返回"number"，不是"length"或"px"——单位不是独立类型 - 想确认是不是“带单位的数字”，得搭配
unit()或unitless()一起用 - 它不识别自定义类型，也不做隐式转换，
type-of("12")就是"string"，哪怕内容看着像数字
别用 variable-exists() 判断变量是否“有值”
很多人误以为 variable-exists(border-radius) 能判断 $border-radius 是否被赋了有效值，其实它只管“有没有声明过”。哪怕你写了 $border-radius: null，它也返回 true。
真正要检测“这个变量是不是空/未初始化”，得这样写：
-
meta.type-of($border-radius) == 'null'→ 精准识别null或未赋值 -
not ($border-radius)→ 对false、null、''都为真，但要小心0和0px也会被当成 false - 处理配置 map 时，优先用
map-has-key($config, 'radius')+map-get($config, 'radius')组合，避免取到null
if() 在 CSS 里不能替代 type-of()
CSS 原生的 if() 函数和 SCSS 的 @if 完全是两回事。前者运行在浏览器渲染阶段，后者在编译阶段就结束了。
你不能指望 if(style(--size: 16px), red, blue) 来模拟 type-of() 的行为——style() 匹配的是原始字符串，不是计算结果；而且它根本不认识 SCSS 变量。
如果真要在 CSS 层做类型相关逻辑，必须配合 @property 显式声明语法类型，比如：
@property --size { syntax: "<length>"; inherits: false; initial-value: 0; }</length>
否则 if() 连数值比较都不可靠。
最常被忽略的一点：SCSS 类型检查只发生在编译时，而开发者往往在调试时盯着浏览器 DevTools 里的最终 CSS，误以为 type-of() 应该能影响运行时行为——它不能。所有分支都已在生成 CSS 前收束完毕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
