StringOptions<sync>
类型参数
-
sync extends "sync" | "async"
这允许 TypeScript 检查器验证异步 Importer、FileImporter 和 CustomFunction
层次结构
- Options<sync>
- StringOptions
输入
Optional
importer
用于处理相对于入口 样式表的加载的导入器。
相对加载的 URL 首先相对于 url 解析,然后传递给
Optional
loadPaths
用于查找通过诸如 @use
和 @import
之类的规则加载的样式表的路径。
加载路径 loadPath
等效于以下 FileImporter
{
findFileUrl(url) {
// Load paths only support relative URLs.
if (/^[a-z]+:/i.test(url)) return null;
return new URL(url, pathToFileURL(loadPath));
}
}
Optional
syntax
Optional
url
输出
可选
charset
- Dart Sass
- 从 1.54.0 开始
- Node Sass
- ✗
如果为 true
,编译器可能会在输出非 ASCII CSS 时,添加 @charset "UTF-8";
或 U+FEFF(字节顺序标记)。
如果为 false
,编译器永远不会发出这些字节序列。当在 HTML <style>
标签中连接或嵌入时,这是理想的选择。(输出仍然是 UTF-8。)
默认值
true
可选
sourceMap
Sass 是否应该生成源映射。如果它确实生成,源映射将作为 sourceMap 提供。
⚠️ 注意!
Sass 不会自动将 sourceMappingURL
注释添加到生成的 CSS 中。调用者负责这样做,因为调用者完全了解 CSS 和源映射在彼此之间的位置,以及它们将如何被提供给浏览器。
默认值
false
可选
sourceMapIncludeSources
可选
style
编译的 CSS 的 OutputStyle。
示例
const source = `
h1 {
font-size: 40px;
code {
font-face: Roboto Mono;
}
}`;
let result = sass.compileString(source, {style: "expanded"});
console.log(result.css.toString());
// h1 {
// font-size: 40px;
// }
// h1 code {
// font-face: Roboto Mono;
// }
result = sass.compileString(source, {style: "compressed"})
console.log(result.css.toString());
// h1{font-size:40px}h1 code{font-face:Roboto Mono}
插件
可选
functions
在所有样式表中可用的其他内置 Sass 函数。此选项接受一个对象,其键是 Sass 函数签名(就像你为 @function 规则
编写的),其值是 CustomFunction。
函数传递给 Value 的子类,并且必须返回相同的值。如果返回值包含 SassCalculation,它们将在返回之前被简化。
在编写自定义函数时,务必使它们尽可能地对用户友好,并尽可能接近 Sass 核心函数所设置的标准。一些好的指南包括:
使用
Value.assert*
方法(例如 assertString)将无类型Value
对象转换为更具体的类型。对于直接作为参数传递的值,也传递参数名称。这确保当用户将错误的类型传递给你的函数时,用户会收到良好的错误消息。各个类可能具有更具体的
assert*
方法(例如 assertInt),应该在可能的情况下使用它们。在 Sass 中,每个值都算作一个列表。你不应该尝试检测 SassList 类型,而应该使用 asList 将所有值视为列表。
在操作具有元数据(逗号与空格分隔、带括号与不带括号、带引号与不带引号、带单位与不带单位)的列表、字符串和数字时,输出元数据应该与输入元数据匹配。
如有疑问,列表应默认为逗号分隔,字符串应默认为带引号,数字应默认为无单位。
在 Sass 中,列表和字符串使用基于 1 的索引,并使用负索引从值的末尾索引。函数应该遵循这些约定。 sassIndexToListIndex 和 sassIndexToStringIndex 可用于自动执行此操作。
Sass 中的字符串索引引用 Unicode 代码点,而 JavaScript 字符串索引引用 UTF-16 代码单元。例如,字符 U+1F60A SMILING FACE WITH SMILING EYES 是单个 Unicode 代码点,但在 UTF-16 中表示为两个代码单元(
0xD83D
和0xDE0A
)。因此,在 JavaScript 中,"a😊b".charCodeAt(1)
返回0xD83D
,而在 Sass 中str-slice("a😊b", 1, 1)
返回"😊"
。函数应该遵循 Sass 的约定。 sassIndexToStringIndex 可用于自动执行此操作,并且 sassLength getter 可用于访问代码点中的字符串长度。
示例
sass.compileString(`
h1 {
font-size: pow(2, 5) * 1px;
}`, {
functions: {
// Note: in real code, you should use `math.pow()` from the built-in
// `sass:math` module.
'pow($base, $exponent)': function(args) {
const base = args[0].assertNumber('base').assertNoUnits('base');
const exponent =
args[1].assertNumber('exponent').assertNoUnits('exponent');
return new sass.SassNumber(Math.pow(base.value, exponent.value));
}
}
});
可选
importers
自定义导入器,控制 Sass 如何从 @use
和 @import
等规则解析加载。
通过按顺序尝试以下方法来解析加载:
用于加载当前样式表的导入器,加载的 URL 相对于当前样式表的规范 URL 解析。
每个 Importer、FileImporter 或 NodePackageImporter 按顺序位于 importers 中。
每个加载路径按顺序位于 loadPaths 中。
如果这些都没有返回 Sass 文件,则加载失败,Sass 会抛出错误。
消息
可选
alertAscii
如果此值为 true
,编译器将仅在其错误和警告消息中使用 ASCII 字符。否则,它可能会也使用非 ASCII Unicode 字符。
默认值
false
可选
alertColor
如果此值为 true
,编译器将在其错误和警告消息中使用 ANSI 颜色转义码。如果它为 false
,它将不会使用这些。如果它未定义,编译器将根据用户是否正在使用交互式终端来确定是否使用颜色。
可选
致命弃用
一组将视为 致命的弃用。
如果在编译期间遇到任何提供的类型的弃用警告,编译器将报错 。
如果提供了一个 版本
,则所有在该编译器版本中处于活动状态的弃用将被视为 致命。
兼容性
dart: "1.74.0", node: false
可选
未来弃用
一组要提前采纳的未来弃用 。
这里传递的未来弃用将被编译器视为活动状态,并根据需要发出警告 。
兼容性
dart: "1.74.0", node: false
可选
日志记录器
可选
静默依赖项
可选
静默弃用
一组要 忽略的活动弃用。
如果在编译期间遇到任何提供的类型的弃用警告,编译器将忽略它 。
⚠️ 注意!
您依赖的弃用功能最终会 中断。
兼容性
dart: "1.74.0", node: false
可选
详细
默认情况下,Dart Sass 每次编译只会打印同一弃用警告的五个实例,以避免在控制台中出现过多噪音。 如果将 详细
设置为 true
,它将改为打印遇到的所有弃用警告 。
默认值
false
可以传递给 compileString 或 compileStringAsync 的选项。
如果未传递 importer 字段,则入口文件可以加载相对于自身的