扩展 Sass

虽然 Sass 提供了一套丰富的内置功能，但你可以通过多种方式扩展其能力，主要通过自定义函数以及与构建环境的集成。

定义自定义 Sass 函数

扩展 Sass 逻辑最常见的方式是使用 @function 规则直接在 Sass 文件中定义自己的函数。这些函数可以封装复杂的计算、逻辑或转换，使你的样式表更强大、更易于维护。

语法：

@function function-name($arg1, $arg2: default-value) {
  // SassScript 逻辑
  $result: ...;
  @return $result;
}

示例：一个从像素值计算 REM 值的函数。

@use 'sass:math'; // 导入内置的 math 模块

$base-font-size: 16px; // REM 计算的基础字体大小

@function rem($pixels) {
  @if type-of($pixels) != 'number' or not unitless($pixels) {
    @error "#{$pixels} 不是 rem() 函数所需的无单位数字。"; // 抛出错误信息
  }
  @return math.div($pixels, $base-font-size / 1px) * 1rem; // 使用 math.div 进行安全除法
}

// 在另一个文件中的用法
@use 'functions';

.element {
  padding: functions.rem(20);
  margin-bottom: functions.rem(40);
}

关于自定义函数的关键点：

它们必须使用 @return 返回一个值。
它们可以接受参数，包括默认值。
最好将它们放在专门的局部文件（partials，例如 _functions.scss）中，并使用 @use 加载。
它们可以利用内置的 Sass 模块（如 sass:math、sass:color、sass:string）进行高级操作。
使用清晰的命名约定，可能带有前缀（例如 my-prefix-function-name），以避免冲突。

JavaScript API (Node.js 环境)

在 Node.js 环境中使用 Dart Sass 时（例如，通过 npm），你可以使用其 JavaScript API 以编程方式与之交互。这允许进行更高级的集成：

自定义导入器 (Custom Importers)： 定义逻辑来解析来自文件系统以外源（例如，数据库、远程 URL）的 @use 或 @import 路径。
JavaScript 中的自定义函数： 在 JavaScript 中定义可以在 Sass 代码中调用的复杂函数。当逻辑对于 SassScript 过于复杂或需要访问 Node.js API 时，这非常有用。
构建工具集成： 在 Webpack、Gulp 等工具或自定义构建脚本中微调 Sass 编译的工作方式。

示例 (JavaScript API 自定义函数的概念性用法)：

const sass = require('sass');

const result = sass.compile( 'styles.scss', {
  functions: {
    // 定义一个可在 Sass 中作为 'fetch-data()' 调用的函数
    'fetch-data()': () => {
      // 执行一些复杂的 JS 逻辑，例如读取文件
      const data = require('./data.json');
      return new sass.SassString(data.someValue);
    }
  }
});

console.log(result.css);

请参考官方 Dart Sass JavaScript API 文档了解详细用法：https://sass-lang.com/documentation/js-api

缓存

Sass 会自动缓存解析过的文件（partials, modules）以加快重新编译速度。当你运行 Sass 时（尤其是在 --watch 模式下），它只会重新解析自上次编译以来发生更改的文件。此缓存机制通常由内部处理，除非你有 JS API 缓存选项所解决的非常具体的需求，否则无需明确配置。

总结

扩展 Sass 主要涉及编写自定义的 @function 指令，以便在 Sass 内部实现可重用逻辑。对于涉及与周边环境（如 Node.js）集成的更高级场景，JavaScript API 提供了强大的工具用于自定义导入器和函数。