meta.type-of() 是 Sass 原生类型判断函数，精准返回值类型（如 "number"、"color"、"string"、"null"），用于安全校验 CSS 值；必须区分带引号字符串与无引号原生类型，避免隐式转换错误。
用 meta.type-of() 判断变量是不是合法的 CSS 值类型
直接用 meta.type-of($val) 能告诉你传进来的是什么——不是“有没有”，而是“到底是什么”。比如 meta.type-of(12px) 返回 "number"，meta.type-of(#3b82f6) 返回 "color"，meta.type-of("12px") 却返回 "string"。这点必须盯紧：带引号就是字符串，不带才是数值或颜色。
常见误判场景：
- 把
$size: "1rem"当成尺寸用，结果meta.type-of($size)是"string"，后续做$size * 2直接编译报错 -
$color: "blue"看似合理，但meta.type-of($color)是"string"，调darken($color, 10%)就崩 -
$shadow: null和$shadow: ""都是 falsy，但meta.type-of()分别返回"null"和"string"，处理逻辑得分开
@if meta.type-of($val) == "number" 才敢做单位运算
CSS 属性如 width、margin、font-size 要求数值带单位，但 SCSS 编译期不做隐式转换。你不能指望 12 自动变成 12px，更不能让 "12px" 参与乘法。
安全写法示例：
立即学习“前端免费学习笔记（深入）”；
@mixin size($val) {
@if meta.type-of($val) == "number" {
width: $val;
height: $val;
}
@else if meta.type-of($val) == "string" and str-index($val, "px") != null {
@warn "String value '#{$val}' used as size — consider using number instead";
width: #{$val};
height: #{$val};
}
@else {
@error "Invalid size: expected number or px-string, got #{meta.type-of($val)}";
}
}关键点：
- 只对
"number"类型做算术（比如$val * 0.8） - 字符串类型可降级兜底，但必须显式识别（如靠
str-index()检查单位） - 别用
@if $val替代类型判断——false、null、0全是 falsy，但语义天差地别
颜色值必须过 meta.type-of() == "color" 这关
_is-color() 函数虽好，但它在 Sass 官方函数里并不存在（属第三方库），而 meta.type-of() 是原生、稳定、无需引入的方案。它能准确区分：
-
#3b82f6→"color"✅ -
"#3b82f6"→"string"❌（引号导致） -
var(--primary)→"string"❌（CSS 变量编译期不可解析） -
currentColor→"color"✅（关键字，无引号）
所以颜色类 mixin 开头该这么写：
@mixin bg-theme($color) {
@if meta.type-of($color) == "color" {
background-color: $color;
}
@else {
@warn "Expected color, got #{meta.type-of($color)} — fallback to transparent";
background-color: transparent;
}
}注意：meta.type-of("red") 是 "string"，meta.type-of(red) 才是 "color"；别漏掉引号这个开关。
别信 variable-exists()，meta.type-of() 才管“有没有值”
variable-exists($shadow) 只回答“这个变量名有没有被声明过”，哪怕 $shadow: null 或 $shadow: !default 未赋值，它都返回 true。真正要判断“能不能用”，得看值本身：
-
meta.type-of($shadow) != "null"→ 有定义且非空（排除null和未赋值） -
meta.type-of($shadow) == "string" and $shadow != ""→ 非空字符串 -
meta.type-of($shadow) == "list" and length($shadow) > 0→ 非空列表
典型用法：
@if meta.type-of($shadow) != "null" {
box-shadow: $shadow;
}这比 @if $shadow 或 @if variable-exists(shadow) 都更贴近真实需求——毕竟你不是想确认变量是否存在，而是想知道“这段 CSS 值不值得输出”。
