自检函数

约 931 字大约 3 分钟

2025-04-12

Sass 的 Introspection（自省）函数 允许开发者在编译时检查代码的内部状态，包括变量、混合宏、函数的存在性、类型信息等。这些函数在调试、动态生成代码或条件编译中非常有用。以下是详细的分类解析和实战示例：

一、变量检查函数

1、`variable-exists($name)`

作用：检查当前作用域或父作用域是否存在指定变量。
返回：布尔值（true/false）。
示例：

$primary-color: #3498db;

@debug variable-exists("primary-color"); // true
@debug variable-exists("secondary-color"); // false

2、`global-variable-exists($name)`

作用：检查全局作用域是否存在指定变量。
返回：布尔值。
示例：

$global-var: 10px;

.local-scope {
  $local-var: 20px;
  @debug global-variable-exists("global-var"); // true
  @debug global-variable-exists("local-var"); // false
}

二、混合宏与函数检查

1、`mixin-exists($name)`

作用：检查混合宏是否已定义。
返回：布尔值。
示例：

@mixin flex-center {
  display: flex;
  justify-content: center;
}

@debug mixin-exists("flex-center"); // true
@debug mixin-exists("grid-layout"); // false

2、`function-exists($name)`

作用：检查函数是否已定义。
返回：布尔值。
示例：

@function double($n) {
  @return $n * 2;
}

@debug function-exists("double"); // true
@debug function-exists("triple"); // false

三、类型检查与信息

1、`type-of($value)`

作用：返回值的类型名称。
返回：string、number、color、list、map、bool、null 或 function。
示例：

@debug type-of(16px); // number
@debug type-of(#fff); // color
@debug type-of((1, 2, 3)); // list
@debug type-of(
  (
    "a": 1,
  )
); // map
@debug type-of("text"); // string
@debug type-of(true); // bool

2、`inspect($value)`

作用：返回值的字符串表示（用于调试）。
注意：输出可能不完全是合法 Sass 代码。
示例：

@debug inspect(1px solid #ccc); // "1px solid #cccccc"
@debug inspect(
  (
    width: 100px,
  )
); // "(width: 100px)"

3、`unit($number)`

作用：返回数值的单位（如 px、%）。
示例：

@debug unit(16px); // "px"
@debug unit(5%); // "%"
@debug unit(10); // ""（无单位）

4、`unitless($number)`

作用：检查数值是否无单位。
返回：布尔值。
示例：

@debug unitless(10); // true
@debug unitless(10px); // false

四、功能支持检测

`feature-exists($feature)`

作用：检查当前 Sass 实现是否支持某个功能（如全局变量、嵌套规则等）。
常用特性名：global-variable-shadowing、extend-selector、at-error。
示例：

@debug feature-exists("at-root"); // true（支持 @at-root）
@debug feature-exists("custom-functions"); // 取决于环境

五、高级应用场景

1、动态加载混合宏

@mixin fallback-layout {
  display: block;
}

@if mixin-exists("grid-layout") {
  @include grid-layout;
} @else {
  @include fallback-layout;
}

2、安全调用函数

@if function-exists("darken") {
  .dark-text {
    color: darken(#333, 10%);
  }
} @else {
  .dark-text {
    color: #000;
  }
}

3、响应式单位处理

@function responsive-value($value) {
  @if type-of($value) == "number" and unitless($value) {
    @return $value * 1vw;
  }
  @return $value;
}

.element {
  width: responsive-value(10); // 10vw
  padding: responsive-value(20px); // 20px
}

六、注意事项

作用域敏感：

variable-exists() 检查当前及父作用域
global-variable-exists() 仅检查全局。

函数名大小写：函数和混合宏的名称检查是大小写敏感的
```
@mixin Flex {
  /* ... */
}
@debug mixin-exists("flex"); // false
```
性能影响：频繁使用自省函数可能降低编译速度，建议仅在必要时使用。

七、最佳实践

防御式编程：在库或框架开发中，使用自省函数确保兼容性：

@if variable-exists("theme-color") {
  $primary: $theme-color;
} @else {
  $primary: #3498db;
}

调试输出优化：结合 @debug 和 inspect() 输出复杂结构：

$config: (
  columns: 12,
  gutter: 20px,
);
@debug "配置详情：" inspect($config);

动态主题生成：根据变量存在性生成不同样式：

@if global-variable-exists("dark-mode") and $dark-mode {
  background: #222;
} @else {
  background: #fff;
}

通过合理运用 Introspection 函数，可以显著提升 Sass 代码的灵活性和健壮性，尤其在处理动态样式、第三方库集成或复杂主题系统时，这些函数是不可或缺的工具。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24