LegacyStringOptions<sync>

如果传递了 data，Sass 将使用它作为要编译的样式表的内容。

已弃用

这仅适用于旧版 render 和 renderSync API。使用 StringOptions 与 compile、compileString、compileAsync 和 compileStringAsync 代替。

类型参数

sync extends "sync" | "async"

这允许 TypeScript 检查器验证 LegacyAsyncImporter 和 LegacyAsyncFunction 没有传递给 renderSync。

层次结构

LegacySharedOptions<sync>
- LegacyStringOptions

索引

输入

data

data: string

要编译的样式表的内容。除非也传递了 file，否则样式表的 URL 将设置为 "stdin"。

默认情况下，此样式表被解析为 SCSS。这可以通过使用 indentedSyntax 来控制。

示例

sass.renderSync({
  data: `
h1 {
  font-size: 40px;
}`
});

`可选` file

file?: string

如果同时传递了 file 和 data，则 file 将用作样式表路径以进行错误报告，但 data 将用作样式表的内容。在这种情况下，file 的扩展名不用于确定样式表的语法。

`可选` includePaths

includePaths?: string[]

Dart Sass: 自 1.15.0 起
Node Sass: 自 3.9.0 起

早期版本的 Dart Sass 和 Node Sass 不支持 SASS_PATH 环境变量。

此字符串数组选项为 Sass 提供了加载路径以查找样式表。较早的加载路径优先于较晚的加载路径。

sass.renderSync({
  file: "style.scss",
  includePaths: ["node_modules/bootstrap/dist/css"]
});

如果设置了 SASS_PATH 环境变量，则还会从该变量加载加载路径。此变量应为路径列表，路径之间用 ;（在 Windows 上）或 :（在其他操作系统上）分隔。来自 includePaths 选项的加载路径优先于来自 SASS_PATH 的加载路径。

$ SASS_PATH=node_modules/bootstrap/dist/css sass style.scss style.css

`可选` 缩进语法

缩进语法?: boolean

此标志控制是否将data解析为缩进语法。

示例

sass.renderSync({
  data: `
h1
  font-size: 40px`,
  indentedSyntax: true
});

默认值

false

输出

`可选` 字符集

字符集?: boolean

Dart Sass: 自 1.39.0 起
Node Sass: ✗

默认情况下，如果 CSS 文档包含非 ASCII 字符，Sass 会添加一个 @charset 声明（在展开输出模式下）或字节顺序标记（在压缩模式下）以指示其编码给浏览器或其他使用者。如果 charset 为 false，则会省略这些注释。

`可选` 缩进类型

缩进类型?: "space" | "tab"

Dart Sass: ✓
Node Sass: 自 3.0.0 起

生成的 CSS 是否应使用空格或制表符进行缩进。

const result = sass.renderSync({
  file: "style.scss",
  indentType: "tab",
  indentWidth: 1
});

result.css.toString();
// "h1 {\n\tfont-size: 40px;\n}\n"

默认值

'space'

`可选` 缩进宽度

缩进宽度?: number

Dart Sass: ✓
Node Sass: 自 3.0.0 起

在生成的 CSS 中，每个缩进级别应使用多少个空格或制表符（取决于缩进类型）。它必须介于 0 和 10（含）之间。

默认值

2

`可选` 换行符

换行符?: "cr" | "crlf" | "lf" | "lfcr"

Dart Sass: ✓
Node Sass: 自 3.0.0 起

在生成的 CSS 中，每行末尾使用哪个字符序列。它可以具有以下值

'lf' 使用 U+000A LINE FEED。
'lfcr' 使用 U+000A LINE FEED 后跟 U+000D CARRIAGE RETURN。
'cr' 使用 U+000D CARRIAGE RETURN。
'crlf' 使用 U+000D CARRIAGE RETURN 后跟 U+000A LINE FEED。

默认值

'lf'

`可选` 输出样式

输出样式?: "expanded" | "compact" | "compressed" | "nested"

已编译 CSS 的输出样式。有四种可能的输出样式

"expanded"（Dart Sass 的默认值）将每个选择器和声明写入自己的行。
"compressed" 删除尽可能多的额外字符，并将整个样式表写入一行。
"nested"（Node Sass 的默认值，Dart Sass 不支持）缩进 CSS 规则以匹配 Sass 源代码的嵌套。
"compact"（Dart Sass 不支持）将每个 CSS 规则放在自己的单行上。

示例

const source = `
h1 {
  font-size: 40px;
  code {
    font-face: Roboto Mono;
  }
}`;

let result = sass.renderSync({
  data: source,
  outputStyle: "expanded"
});
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// h1 code {
//   font-face: Roboto Mono;
// }

result = sass.renderSync({
  data: source,
  outputStyle: "compressed"
});
console.log(result.css.toString());
// h1{font-size:40px}h1 code{font-face:Roboto Mono}

result = sass.renderSync({
  data: source,
  outputStyle: "nested"
});
console.log(result.css.toString());
// h1 {
//   font-size: 40px; }
//   h1 code {
//     font-face: Roboto Mono; }

result = sass.renderSync({
  data: source,
  outputStyle: "compact"
});
console.log(result.css.toString());
// h1 { font-size: 40px; }
// h1 code { font-face: Roboto Mono; }

插件

`可选` 函数

函数?: {
[键: string]: LegacyFunction<同步>;
}

在所有样式表中都可用的其他内置 Sass 函数。此选项采用一个对象，其键为 Sass 函数签名，其值为 LegacyFunction。每个函数应采用与其签名相同的参数。

函数传递 LegacyValue 的子类，并且必须返回相同的值。

⚠️ 注意！

在编写自定义函数时，务必确保所有参数都是您期望的类型。否则，用户的样式表可能会以难以调试的方式崩溃，或者更糟糕的是，编译成毫无意义的 CSS。

示例

sass.render({
  data: `
h1 {
  font-size: pow(2, 5) * 1px;
}`,
  functions: {
    // This function uses the synchronous API, and can be passed to either
    // renderSync() or render().
    'pow($base, $exponent)': function(base, exponent) {
      if (!(base instanceof sass.types.Number)) {
        throw "$base: Expected a number.";
      } else if (base.getUnit()) {
        throw "$base: Expected a unitless number.";
      }

      if (!(exponent instanceof sass.types.Number)) {
        throw "$exponent: Expected a number.";
      } else if (exponent.getUnit()) {
        throw "$exponent: Expected a unitless number.";
      }

      return new sass.types.Number(
          Math.pow(base.getValue(), exponent.getValue()));
    },

    // This function uses the asynchronous API, and can only be passed to
    // render().
    'sqrt($number)': function(number, done) {
      if (!(number instanceof sass.types.Number)) {
        throw "$number: Expected a number.";
      } else if (number.getUnit()) {
        throw "$number: Expected a unitless number.";
      }

      done(new sass.types.Number(Math.sqrt(number.getValue())));
    }
  }
}, function(err, result) {
  console.log(result.css.toString());
  // h1 {
  //   font-size: 32px;
  // }
});

类型声明

[键: string]: LegacyFunction<同步>

`可选` 导入器

导入器?: LegacyImporter<同步> | LegacyImporter<同步>[]

Dart Sass: ✓
Node Sass: 自 3.0.0 起

3.0.0 之前的 Node Sass 版本不支持导入器数组，也不支持返回 Error 对象的导入器。

2.0.0 之前的 Node Sass 版本根本不支持 importer 选项。

Dart Sass: 自 1.20.2 起
Node Sass: ✗

1.20.2 之前的 Dart Sass 版本优先使用 includePaths 解析导入，然后再使用自定义导入器解析导入。

当前所有版本的 Node Sass 都会在将导入加载到 @import 所在文件的相对位置之前，将导入传递给导入器。这种行为被认为是不正确的，不应依赖于它，因为它违反了局部性原则，该原则指出，应该能够在不了解整个系统设置的情况下推断样式表。如果用户尝试导入另一个样式表的相对样式表，则该导入始终有效。不应允许其他某个配置破坏它。

当遇到 @use 规则或 @import 规则时，用于加载文件的附加处理程序。它可以是单个 LegacyImporter 函数，也可以是 LegacyImporter 数组。

导入器获取 @import 或 @use 规则的 URL，并返回一个 LegacyImporterResult，指示如何处理该规则。有关更多详细信息，请参阅 LegacySyncImporter 和 LegacyAsyncImporter。

加载按以下顺序解析

从 @use 或 @import 所在文件的相对位置加载磁盘上的文件。
每个自定义导入器。
加载相对于当前工作目录的文件。
includePaths 中的每个加载路径。
SASS_PATH 环境变量中指定的每个加载路径，在 Windows 上应使用分号分隔，在其他地方应使用冒号分隔。

示例

sass.render({
  file: "style.scss",
  importer: [
    // This importer uses the synchronous API, and can be passed to either
    // renderSync() or render().
    function(url, prev) {
      // This generates a stylesheet from scratch for `@use "big-headers"`.
      if (url != "big-headers") return null;

      return {
        contents: `
h1 {
  font-size: 40px;
}`
      };
    },

    // This importer uses the asynchronous API, and can only be passed to
    // render().
    function(url, prev, done) {
      // Convert `@use "foo/bar"` to "node_modules/foo/sass/bar".
      const components = url.split('/');
      const innerPath = components.slice(1).join('/');
      done({
        file: `node_modules/${components.first}/sass/${innerPath}`
      });
    }
  ]
}, function(err, result) {
  // ...
});

`可选` 包导入器

包导入器?: NodePackageImporter

Dart Sass: 自 2.0 起
Node Sass: ✗

如果此选项设置为 NodePackageImporter 的实例，Sass 将使用内置的 Node.js 包导入器来解析具有 pkg: URL 方案的 Sass 文件。库作者和用户的详细信息可以在 NodePackageImporter 文档中找到。

示例

sass.renderSync({
  data: '@use "pkg:vuetify";',
  pkgImporter: new sass.NodePackageImporter()
});

消息

`可选` 致命弃用

致命弃用?: (DeprecationOrId | Version)[]

一组要视为致命的弃用。

如果在编译过程中遇到任何提供的类型的弃用警告，编译器将报错。

如果提供了 Version，则该编译器版本中所有处于活动状态的弃用都将被视为致命。

兼容性

dart: "1.78.0", node: false

`可选` 未来弃用

未来弃用?: DeprecationOrId[]

一组要提前选择加入的未来弃用。

此处传递的未来弃用将被编译器视为活动状态，并在必要时发出警告。

兼容性

dart: "1.78.0", node: false

`可选` 日志记录器

日志记录器?: Logger

Dart Sass: 自 1.43.0 起
Node Sass: ✗

用于处理 Sass 发出的警告和/或调试消息的对象。

默认情况下，Sass 会将警告和调试消息输出到标准错误，但如果设置了 warn 或 debug，则将改为调用它们。

特殊值 silent 可用于轻松地静默所有消息。

`可选` 静默依赖项

静默依赖项?: boolean

Dart Sass: 自 1.35.0 起
Node Sass: ✗

如果此选项设置为 true，Sass 不会打印由依赖项引起的警告。“依赖项”定义为通过 includePaths 或 importer 加载的任何文件。相对于入口点导入的样式表不被视为依赖项。

这对于静默您无法自行修复的弃用警告很有用。但是，请也通知您的依赖项有关弃用的信息，以便它们能够尽快修复！

⚠️ 注意！

如果在没有 file 或 file 的情况下调用 render 或 renderSync，它加载的所有样式表都将被视为依赖项。由于它没有自己的路径，因此它加载的所有内容都来自加载路径而不是相对导入。

默认值

false

`可选` 静默弃用

静默弃用?: DeprecationOrId[]

一组要忽略的活动弃用。

如果在编译过程中遇到任何提供的类型的弃用警告，编译器将改为忽略它。

⚠️ 注意！

您依赖的已弃用功能最终将失效。

兼容性

dart: "1.78.0", node: false

`可选` 详细

详细?: boolean

Dart Sass: 自 1.35.0 起
Node Sass: ✗

默认情况下，Dart Sass 每个编译只会打印相同弃用警告的五个实例，以避免在控制台输出中出现大量噪音。如果将 verbose 设置为 true，它将改为打印遇到的每个弃用警告。

默认值

false

源地图

`可选` 省略源映射URL

省略源映射URL?: boolean

如果 true，Sass 不会从生成的 CSS 添加到源映射的链接。

const result = sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  omitSourceMapUrl: true
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }

默认值

false

`可选` 输出文件

输出文件?: string

Sass 预期将生成的 CSS 保存到的位置。它用于确定用于从生成的 CSS 链接到源映射以及从源映射链接到 Sass 源文件的 URL。

⚠️ 注意！

尽管名称如此，但 Sass 不会将 CSS 输出写入此文件。调用方必须自己执行此操作。

result = sass.renderSync({
  file: "style.scss",
  sourceMap: true,
  outFile: "out.css"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.css.map * /

`可选` 源映射

源映射?: string | boolean

Sass 是否应该生成源映射。如果确实如此，源映射将作为 map 提供（除非 sourceMapEmbed 为 true）。

如果此选项是字符串，则它是源映射的预期写入路径，用于从生成的 CSS 链接到源映射，以及从源映射链接到 Sass 源文件。请注意，如果 sourceMap 是字符串且未传递 outFile，则 Sass 假设 CSS 将写入与文件选项相同的目录（如果已传递）。

如果此选项为 true，则路径假定为 outFile，并在末尾添加 .map。如果它为 true 且未传递 outFile，则无效。

示例

let result = sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.map * /

result = sass.renderSync({
  file: "style.scss",
  sourceMap: true,
  outFile: "out.css"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.css.map * /

默认值

false

`可选` 源映射内容

源映射内容?: boolean

是否将生成 CSS 的 Sass 文件的全部内容嵌入到源映射中。这可能会生成非常大的源映射，但它可以保证无论 CSS 如何提供，源都可以在任何计算机上使用。

示例

sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  sourceMapContents: true
})

默认值

false

`可选` sourceMapEmbed

sourceMapEmbed?: boolean

是否将源映射文件的內容嵌入到生成的 CSS 中，而不是创建单独的文件并从 CSS 中链接到它。

示例

sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  sourceMapEmbed: true
});

默认值

false

`可选` sourceMapRoot

sourceMapRoot?: string

如果传递此参数，则将其添加到源映射到 Sass 源文件的全部链接之前。

已弃用

类型参数

sync extends "sync" | "async"

层次结构

索引

输入

输出

插件

消息

源地图

输入

data

示例

可选 file

可选 includePaths

可选 缩进语法

示例

默认值

输出

可选 字符集

可选 缩进类型

默认值

可选 缩进宽度

默认值

可选 换行符

默认值

可选 输出样式

示例

插件

可选 函数

⚠️ 注意！

示例

类型声明

[键: string]: LegacyFunction<同步>

可选 导入器

示例

可选 包导入器

示例

消息

可选 致命弃用

兼容性

可选 未来弃用

兼容性

可选 日志记录器

可选 静默依赖项

⚠️ 注意！

默认值

可选 静默弃用

⚠️ 注意！

兼容性

可选 详细

默认值

源地图

可选 省略源映射URL

默认值

可选 输出文件

⚠️ 注意！

可选 源映射

示例

默认值

可选 源映射内容

示例

默认值

可选 sourceMapEmbed

示例

默认值

可选 sourceMapRoot

`可选` file

`可选` includePaths

`可选` 缩进语法

`可选` 字符集

`可选` 缩进类型

`可选` 缩进宽度

`可选` 换行符

`可选` 输出样式

`可选` 函数

`可选` 导入器

`可选` 包导入器

`可选` 致命弃用

`可选` 未来弃用

`可选` 日志记录器

`可选` 静默依赖项

`可选` 静默弃用

`可选` 详细

`可选` 省略源映射URL

`可选` 输出文件

`可选` 源映射

`可选` 源映射内容

`可选` sourceMapEmbed

`可选` sourceMapRoot