type-of返回"number"、"color"、"list"、"map"、"null"、"string"等sass内部类型名；易误判点：16px与16同为"number"；#fff为"color"但"#fff"为"string"；null与"null"类型不同；空map仍为"map"。
meta.type-of 能返回哪些值，哪些最容易误判
meta.type-of 返回的是 Sass 内部类型名，不是 JavaScript 那套：比如 "number"、"color"、"list"、"map"、"null"、"string"。注意几个典型陷阱：
-
type-of(16px)和type-of(16)都返回"number"—— Sass 没有"length"子类型，单位不改变类型 -
type-of("#fff")是"string"，但type-of(#fff)才是"color"；引号一加，语义全变 -
type-of(null)是"null"，而type-of("null")是"string"，别被字面量迷惑 -
type-of($map)对空 map 仍返回"map"，不能靠它判断“有没有键”，得配map-size($map) > 0
为什么不能只写 @if $val 做参数校验
SCSS 中 @if $val 会把 false、null、空字符串 ""、数字 0 全当 falsy，但它们语义完全不同：
-
$size: 0可能是合法的尺寸（如border-width: 0） -
$color: null表示“不设颜色”，应跳过生成color声明 -
$shadow: ""是字符串，不是"null"，meta.type-of("") == "string"，但你大概率不希望输出box-shadow: "";
真正安全的非空判断是：@if meta.type-of($val) != "null" 或更明确地 @if meta.type-of($val) == "number" or meta.type-of($val) == "string"。
在 mixin 中组合 type-of 和业务逻辑做守卫
直接在 mixin 开头用 @if + meta.type-of 拦截非法输入，比让错误在后续计算中爆发更可控。例如一个处理间距的 mixin：
@mixin padding($val) {
@if meta.type-of($val) == "number" {
padding: $val;
}
@else if meta.type-of($val) == "list" and length($val) == 4 {
padding: nth($val, 1) nth($val, 2) nth($val, 3) nth($val, 4);
}
@else {
@warn "Expected number or 4-item list for padding, got #{meta.type-of($val)}";
}
}
关键点：
- 先判
meta.type-of，再调length()—— 否则对非list类型调用会编译失败 - 错误信息里拼
#{meta.type-of($val)}，调试时一眼知道传了啥 - 别漏掉
"null"分支：如果允许$val: null表示“不设 padding”，就得显式处理
type-of 和 _is-* 函数必须配合使用
_is-length、_is-color 这类函数不是万能的，它们本身不检查变量是否存在，也不区分 null 和未定义：
-
_is-length($spacing)对$spacing: null返回false，但不会报错，容易静默跳过 -
_is-color($c)对$c: "red"返回false，但如果你没用@if包裹，照样会往下走，可能触发lighten("red", 10%)编译失败 - 最稳妥写法是两层校验：
@if meta.type-of($val) != "null" and _is-length($val)
类型校验永远发生在编译期，且必须显式触发 —— Sass 不会自动帮你拦错，@if 是唯一开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
