typeof 返回值共八种字符串:'undefined'、'boolean'、'number'、'string'、'bigint'、'symbol'、'object'、'function';易混淆点是 null 返回 'object',数组和日期等也返回 'object',无法直接区分。

type-of 能返回什么值,哪些类型容易混淆
type-of 是 Sass 最基础的类型判断函数,但它返回的不是 JavaScript 那样的 "string" 或 "number",而是 Sass 自己的类型名:比如 "string"、"number"、"color"、"list"、"map"、"bool"、"null"、"function"。注意两点:
-
type-of(10px)返回"number",不是"length"—— Sass 没有子类型概念 -
type-of(("a": 1, "b": 2))返回"map",但type-of(["a", "b"])返回"list",哪怕它看起来像数组 -
type-of(null)返回"null",而type-of("null")返回"string",字符串字面量和关键字必须分清
在 mixin 中用 type-of 做参数校验的典型写法
直接在 mixin 开头加 guard 判断,比让错误在后续计算中爆发更可控。比如一个接受尺寸的 size mixin:
@mixin size($val) {
@if type-of($val) == "number" {
width: $val;
height: $val;
} @else if type-of($val) == "list" and length($val) == 2 {
width: nth($val, 1);
height: nth($val, 2);
} @else {
@error "Expected number or two-item list, got #{type-of($val)}";
}
}这里关键点是:
- 先判
type-of,再用length()或map-has-key()等做二次检查,避免对非 list 类型调用length()报错 - 错误信息里拼接
#{type-of($val)},方便调试时一眼看到传了啥 - 不要只写
@if $val——false、null、空字符串都为 falsy,但语义完全不同
type-of 在 map 和 function 场景下的特殊注意点
这两个类型最容易误判或漏判:
-
type-of(get-function("lighten"))返回"function",但type-of(lighten)(不带引号)会报错 —— 必须用字符串形式传函数名 -
type-of($map)对空 map 仍返回"map",所以不能靠type-of判断是否“有内容”,得配合map-keys($map)或map-size($map) - 自定义函数返回值类型由实现决定,比如
str-length("abc")返回 number,但type-of(str-length("abc"))仍是"number",别指望它能识别“这是字符串长度”
为什么不用 feature-exists 或 global-variable-exists 替代 type-of
type-of 解决的是「这个值当前是什么类型」,而 feature-exists 查的是 Sass 版本能力,global-variable-exists 查的是变量是否存在 —— 完全不同维度。常见误用:
- 想判断某个变量是否为 map,却去查
global-variable-exists("$config")—— 存在 ≠ 是 map - 在旧版 Sass(type-of 判断
"calc"值类型(它当时返回"string",新版才返回"calc")—— 实际上type-of(calc(100% - 20px))在 Dart Sass 中返回"calc",但 LibSass 不支持,这点容易被忽略
真正需要健壮 mixin 的地方,往往卡在类型边界上:比如用户传了 1rem(number)、"1rem"(string)、px 单位缺失、甚至 CSS 变量 var(--size)(也是 string)。type-of 只是第一道筛子,后面还得结合 unit()、str-index() 或正则匹配补足。

















