\_is-color 严格校验 Sass 原生 color 类型(如 #3b82f6)或 "currentColor" 字符串,不接受关键字 "red" 或带引号十六进制;\_is-length 强制单位完整,支持 calc、CSS 变量和关键字,拒绝无单位数值;\_is-number 仅为含数字字符的粗筛,需配合 type-of 使用;所有验证均在编译期生效,须显式用 @if 包裹并组合判断。

用 _is-color 判断颜色值是否合法
传入一个值,_is-color 会严格检查它是不是 Sass 原生 color 类型(如 #3b82f6、rgb(59, 130, 246))或字符串 "currentColor"。它不接受 "red" 这类未加引号的关键字,也不接受带引号的十六进制如 "#fff"——后者是字符串,不是 color 类型。
常见错误现象:样式编译失败,报错 Undefined operation: "red" * 0.8,本质是误把字符串当颜色参与计算。
- 正确写法:
$color: #3b82f6; @if _is-color($color) { color: $color; } - 错误写法:
$color: "red";或$color: 'red';—— 都会被判为 false - 注意:CSS 变量如
var(--primary)不被识别,_is-color是编译期验证,不处理运行时值
用 _is-length 检查单位是否完整
_is-length 的核心作用是防止你传入无单位数值(比如 16),强制要求明确单位(16px)、支持 calc 表达式(calc(100% - 2rem))、CSS 变量(var(--spacing-md))和关键字(auto、inherit)。
典型踩坑场景:在 margin/padding mixin 中直接传 16,结果生成 margin: 16;,浏览器忽略该声明,布局消失却无报错。
立即学习“前端免费学习笔记(深入)”;
- 它允许
16px、2em、calc(1rem + 4px)、var(--gap) - 它拒绝
16(unitless number)、"16px"(字符串)、blue(颜色) - 性能提示:该函数内部用了
str-slice和index,对超长字符串或大量嵌套调用有轻微开销,但日常使用无感
用 _is-number 验证数值输入,但别指望它万能
_is-number 实际上是个轻量级“含数字字符”检查器,靠 _contains 查找 0-9 字符是否存在。它能识别 42、2.5rem、100%,但也会把 "10px"(字符串)误判为 true——因为字符串里确实有数字。
这意味着它不适合做类型强校验,更适合用在“至少得含数字”的粗筛阶段,比如判断某个变量能否作为缩放系数或透明度基数。
- 安全用法:
@if _is-number($value) and type-of($value) == number { opacity: $value; } - 危险用法:
@if _is-number($value) { width: $value; }—— 若 $value 是"100px"字符串,会直接拼进 CSS 导致语法错误 - 它不处理科学计数法(
1e3)、负号(-2)或小数点逻辑,纯字符匹配
验证链要自己搭,Bourbon 不自动拦截错误值
Bourbon 的 validators 全是纯函数,返回布尔值,不做中断、警告或默认回退。你必须显式用 @if 包裹,否则无效值照样参与计算,直到编译报错或运行时失效。
最容易被忽略的一点:这些函数只在 Sass 编译期起作用,对最终生成的 CSS 无任何约束力。上线后用户改 DOM style 或注入 JS 计算值,完全绕过所有验证。
- 务必组合使用:
@if _is-color($c) and _is-length($s) { background-color: $c; padding: $s; } - 建议搭配默认值:
$color: if(_is-color($input), $input, $color-default); - 不要依赖单个验证函数兜底;复杂场景应自定义组合判断,比如同时检查单位、范围、类型


















