scss 中不存在 meta.type-of(),正确函数是 type-of($value),用于返回值的类型字符串(如 "number"、"string"、"color"、"list"、"map"、"null"),是参数类型校验的核心手段。

meta.type-of 不是 SCSS 原生函数,它根本不存在——SCSS 标准函数库里没有这个东西。你看到的很可能是混淆了 Sass 的 type-of()(注意没有 meta. 前缀)或误记了其他语言(如 JavaScript 的 typeof)。
SCSS 里真正可用的是 type-of(),不是 meta.type-of()
SCSS 内置函数 type-of($value) 用于运行时判断变量/参数的数据类型,返回字符串如 "number"、"color"、"string"、"list"、"map"、"null" 等。它是做参数校验最轻量也最可靠的方式之一。
- 错误写法:
meta.type-of($size)→ 编译直接报错Undefined function - 正确写法:
type-of($size)→ 可安全用于条件分支 - 典型用途:在 mixin 或 function 中拦截非法传参,避免生成无效 CSS 或静默失败
用 type-of() 防止按钮尺寸 mixin 接收错误类型
比如你在写一个支持 $size 参数的按钮尺寸混合器,但用户可能误传字符串 "large"(带引号)、数字 40、甚至空值 null。不加校验会导致 @if $size == large 永远为 false,最终没匹配到任何分支,CSS 不生成。
- 先检查类型:
@if type-of($size) != "string"→ 直接抛错,不依赖值内容 - 再校验取值:
@if not index(('small', 'base', 'large'), $size)→ 确保是合法枚举值 - 组合使用更健壮:
@mixin btn-size($size) { @if type-of($size) != "string" { @error "btn-size: $size 必须是字符串,如 'small',当前类型:#{type-of($size)}"; } @if not index(('small', 'base', 'large'), $size) { @error "btn-size: 不支持的尺寸 #{$size},仅接受 'small'/'base'/'large'"; } // 后续逻辑... }
为什么不用 length() 或 str-length() 替代?
有人想用 length($size) 判断是否为列表,或用 str-length($size) 判断字符串长度来“间接识别类型”。这不可靠:
-
length(123)返回1(数字被转为单元素列表),但123显然不是合法尺寸 -
str-length("large")是5,但"xl"也是字符串、长度 2,却不在白名单里 - 类型错误必须在第一层就拦截,而不是等进入分支后才发现值不匹配
-
type-of()是唯一能明确区分40(number)和"40"(string)的内置手段
容易忽略的边界情况:空字符串和 undefined
SCSS 中未声明的变量读取结果是 undefined,而 type-of(undefined) 返回 "null" ——注意这不是 JavaScript 的 undefined,而是 Sass 的空值表示。这意味着:
- 如果调用
@include btn-size($missing-var),$missing-var是未定义的,type-of()返回"null",你的校验会立刻捕获 - 但若用户显式传入
""(空字符串),type-of("")是"string",仍会通过类型检查,需额外用str-length($size) == 0排除 - 所以完整校验链通常是:
type-of() → 非 null/string → str-length() > 0 → index() 匹配白名单
真正健壮的 SCSS 不靠“默认兜底”,而靠在编译期就拒绝一切模糊输入。类型检查只是起点,后面还得叠加语义校验;而 type-of() 是这条链上最不可跳过的一环——它不解决“对不对”,但能第一时间告诉你“是不是”。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











