Dart Sass 命令行界面

用法用法永久链接

Dart Sass 可执行文件可以通过两种模式之一调用。

一对一模式一对一模式永久链接

sass <input.scss> [output.css]

一对一模式将单个输入文件 (input.scss) 编译到单个输出位置 (output.css)。如果未传递输出位置，则编译的 CSS 将打印到终端。

如果输入文件的扩展名为 .scss，则将其解析为 SCSS；如果扩展名为 .sass，则将其解析为缩进语法；如果扩展名为 .css，则将其解析为纯 CSS。如果它没有这三个扩展名中的任何一个，或者它来自标准输入，则默认将其解析为 SCSS。这可以通过 --indented 标志来控制。

特殊字符串 - 可以传递到输入文件的位置，以告诉 Sass 从标准输入读取输入文件。除非传递了 --indented 标志，否则 Sass 将默认将其解析为 SCSS。

多对多模式多对多模式永久链接

Dart Sass: 自 1.4.0 起

sass [<input.scss>:<output.css>] [<input/>:<output/>]...

多对多模式将一个或多个输入文件编译到一个或多个输出文件。输入与输出用冒号分隔。它还可以将目录中的所有 Sass 文件编译为另一个目录中具有相同名称的 CSS 文件。

# Compiles style.scss to style.css.
$ sass style.scss:style.css

# Compiles light.scss and dark.scss to light.css and dark.css.
$ sass light.scss:light.css dark.scss:dark.css

# Compiles all Sass files in themes/ to CSS files in public/css/.
$ sass themes:public/css

在编译整个目录时，Sass 将忽略名称以 _ 开头的部分文件。你可以使用部分文件来分离样式表，而无需创建大量不必要的输出文件。

选项选项永久链接

输入和输出输入和输出永久链接

这些选项控制 Sass 如何加载其输入文件以及如何生成输出文件。

`--stdin`–stdin 永久链接

此标志是告诉 Sass 从标准输入读取其输入文件的另一种方式。当它被传递时，可能不会传递任何输入文件。

$ echo "h1 {font-size: 40px}" | sass --stdin h1.css
$ echo "h1 {font-size: 40px}" | sass --stdin
h1 {
  font-size: 40px;
}

--stdin 标志不能与多对多模式一起使用。

`--indented`–indented 永久链接

此标志告诉 Sass 将输入文件解析为缩进语法。如果在多对多模式中使用，所有输入文件都将解析为缩进语法，尽管它们使用的文件将像往常一样确定其语法。相反，--no-indented 可用于强制将所有输入文件解析为 SCSS 。

--indented 标志在输入文件来自标准输入时最有用，因此无法自动确定其语法。

$ echo -e 'h1\n  font-size: 40px' | sass --indented -
h1 {
  font-size: 40px;
}

`--load-path`–load-path 永久链接

此选项（缩写为 -I）为 Sass 添加了一个额外的加载路径，用于查找样式表。可以多次传递它以提供多个加载路径。较早的加载路径将优先于较晚的加载路径。

$ sass --load-path=node_modules/bootstrap/dist/css style.scss style.css

`--pkg-importer=node`–pkg-importer=node 永久链接

Dart Sass: 自 1.71.0 起

此选项（缩写为 -p node）将 Node.js pkg: 导入器添加到加载路径的末尾，以便样式表可以使用 Node.js 模块解析算法加载依赖项。

将来可能会增加对其他内置 pkg: 导入器的支持。

$ sass --pkg-importer=node style.scss style.css

`--style`–style 永久链接

此选项（缩写为 -s）控制生成 CSS 的输出样式。Dart Sass 支持两种输出样式

expanded（默认值）将每个选择器和声明写入其自己的行。
compressed 删除尽可能多的额外字符，并将整个样式表写入单行。

$ sass --style=expanded style.scss
h1 {
  font-size: 40px;
}

$ sass --style=compressed style.scss
h1{font-size:40px}

`--no-charset`–no-charset 永久链接

Dart Sass: 自 1.19.0 起

此标志告诉 Sass 永远不要发出 @charset 声明或 UTF-8 字节顺序标记。默认情况下，或者如果传递了 --charset，如果样式表包含任何非 ASCII 字符，Sass 将插入 @charset 声明（在展开输出模式中）或字节顺序标记（在压缩输出模式中）。

$ echo 'h1::before {content: "👭"}' | sass --no-charset
h1::before {
  content: "👭";
}

$ echo 'h1::before {content: "👭"}' | sass --charset
@charset "UTF-8";
h1::before {
  content: "👭";
}

`--error-css`–error-css 永久链接

Dart Sass: 自 1.20.0 起

此标志告诉 Sass 是否在编译期间发生错误时发出 CSS 文件。此 CSS 文件在注释中描述了错误和body::before 的 content 属性中，以便您可以在浏览器中看到错误消息，而无需切换回终端。

默认情况下，如果您编译到磁盘上的至少一个文件（而不是标准输出），则会启用错误 CSS。您可以显式传递 --error-css，即使您正在编译到标准输出时也可以启用它，或者传递 --no-error-css 以在任何地方禁用它。禁用后，--update 标志和 --watch 标志会在出现错误时删除 CSS 文件。

$ sass --error-css style.scss style.css
/* Error: Incompatible units em and px.
 *   ,
 * 1 | $width: 15px + 2em;
 *   |         ^^^^^^^^^^
 *   '
 *   test.scss 1:9  root stylesheet */

body::before {
  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
      "Droid Sans Mono", monospace, monospace;
  white-space: pre;
  display: block;
  padding: 1em;
  margin-bottom: 1em;
  border-bottom: 2px solid black;
  content: "Error: Incompatible units em and px.\a   \2577 \a 1 \2502  $width: 15px + 2em;\a   \2502          ^^^^^^^^^^\a   \2575 \a   test.scss 1:9  root stylesheet";
}
Error: Incompatible units em and px.
  ╷
1 │ $width: 15px + 2em;
  │         ^^^^^^^^^^
  ╵
  test.scss 1:9  root stylesheet

`--update`–update 永久链接

Dart Sass: 自 1.4.0 起

如果传递了 --update 标志，Sass 将只编译其依赖项比相应的 CSS 文件生成得更近的样式表。它还将在更新样式表时打印状态消息。

$ sass --update themes:public/css
Compiled themes/light.scss to public/css/light.css.

源映射源映射永久链接

Dart Sass: 自 1.3.0 起

源映射是告诉浏览器或其他使用 CSS 的工具该 CSS 如何对应于生成它的 Sass 文件的文件。它们使您可以在浏览器中查看甚至编辑 Sass 文件。请参阅在 Chrome 和 Firefox 中使用源映射的说明。

Dart Sass 默认情况下为其发出的每个 CSS 文件生成源映射。

`--no-source-map`–no-source-map 永久链接

如果传递了 --no-source-map 标志，Sass 不会生成任何源映射。它不能与其他源映射选项一起传递。

$ sass --no-source-map style.scss style.css

`--source-map-urls`–source-map-urls 永久链接

此选项控制 Sass 生成的源映射如何链接回生成 CSS 的 Sass 文件。Dart Sass 支持两种类型的 URL

relative（默认值）使用从源映射文件的位置到 Sass 源文件位置的相对 URL。
absolute 使用 Sass 源文件的绝对 file: URL。请注意，绝对 URL 仅适用于编译 CSS 的同一台计算机。

# Generates a URL like "../sass/style.scss".
$ sass --source-map-urls=relative sass/style.scss css/style.css

# Generates a URL like "file:///home/style-wiz/sassy-app/sass/style.scss".
$ sass --source-map-urls=absolute sass/style.scss css/style.css

`--embed-sources`–embed-sources 永久链接

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

$ sass --embed-sources sass/style.scss css.style.css

`--embed-source-map`–embed-source-map 永久链接

此标志告诉 Sass 将源映射文件的内容嵌入到生成的 CSS 中，而不是创建单独的文件并从 CSS 中链接到它。

$ sass --embed-source-map sass/style.scss css.style.css

其他选项其他选项永久链接

`--watch`–watch 永久链接

Dart Sass: 自 1.6.0 起

此标志（缩写为 -w）的作用类似于 --update 标志，但在第一轮编译完成后，Sass 仍保持打开状态，并在样式表或其依赖项发生更改时继续编译样式表。

Sass 仅监视命令行中按原样传递的目录、命令行中传递的文件名的父目录和加载路径。它不会根据文件的 @import/@use/ @forward 规则监视其他目录。

$ sass --watch themes:public/css
Compiled themes/light.scss to public/css/light.css.

# Then when you edit themes/dark.scss...
Compiled themes/dark.scss to public/css/dark.css.

`--poll`–poll 永久链接

Dart Sass: 自 1.8.0 起

此标志只能与 --watch 一起传递，它指示 Sass 手动检查源文件是否发生更改，而不是依赖于操作系统在发生更改时通知它。如果你在操作系统通知系统不起作用的远程驱动器上编辑 Sass，则可能需要这样做。

$ sass --watch --poll themes:public/css
Compiled themes/light.scss to public/css/light.css.

# Then when you edit themes/dark.scss...
Compiled themes/dark.scss to public/css/dark.css.

`--stop-on-error`–stop-on-error 永久链接

Dart Sass: 自 1.8.0 起

此标志指示 Sass 在检测到错误时立即停止编译，而不是尝试编译其他可能不包含错误的 Sass 文件。它在多对多模式中非常有用。

$ sass --stop-on-error themes:public/css
Error: Expected expression.
   ╷
42 │ h1 {font-face: }
   │                ^
   ╵
  themes/light.scss 42:16  root stylesheet

`--interactive`–interactive 永久链接

Dart Sass: 自 1.5.0 起

此标志（缩写为 -i）指示 Sass 以交互模式运行，你可以在其中编写 SassScript 表达式并查看其结果。交互模式还支持变量和 @use 规则。

$ sass --interactive
>> 1px + 1in
97px
>> @use "sass:map"
>> $map: ("width": 100px, "height": 70px)
("width": 100px, "height": 70px)
>> map.get($map, "width")
100px

`--color`–color 永久链接

此标志（缩写为 -c）指示 Sass 发射终端颜色，而反向的 --no-color 则指示它不发射颜色。默认情况下，如果看起来它正在支持它们的终端上运行，它将发射颜色。

$ sass --color style.scss style.css
Error: Incompatible units em and px.
  ╷
1 │ $width: 15px + 2em
  │         ^^^^^^^^^^
  ╵
  style.scss 1:9  root stylesheet

$ sass --no-color style.scss style.css
Error: Incompatible units em and px.
  ╷
1 │ $width: 15px + 2em
  │         ^^^^^^^^^^
  ╵
  style.scss 1:9  root stylesheet

`--no-unicode`–no-unicode 永久链接

Dart Sass: 自 1.17.0 起

此标志指示 Sass 仅在错误消息中将 ASCII 字符发射到终端。默认情况下，或如果传递了 --unicode，Sass 将为这些消息发射非 ASCII 字符。此标志不影响 CSS 输出。

$ sass --no-unicode style.scss style.css
Error: Incompatible units em and px.
  ,
1 | $width: 15px + 2em;
  |         ^^^^^^^^^^
  '
  test.scss 1:9  root stylesheet

$ sass --unicode style.scss style.css
Error: Incompatible units em and px.
  ╷
1 │ $width: 15px + 2em;
  │         ^^^^^^^^^^
  ╵
  test.scss 1:9  root stylesheet

`--quiet`–quiet 永久链接

此标志（缩写为 -q）指示 Sass 在编译时不发出任何警告。默认情况下，Sass 在使用已弃用的功能或遇到 @warn 规则时发出警告。它还会使 @debug 规则静音。

$ sass --quiet style.scss style.css

`--quiet-deps`–quiet-deps 链接

此标志告诉 Sass 不要发出依赖项产生的弃用警告。它将通过加载路径传递导入的任何文件视为“依赖项”。此标志不会影响@warn 规则或@debug 规则。

$ sass --load-path=node_modules --quiet-deps style.scss style.css

`--fatal-deprecation`–fatal-deprecation 链接

Dart Sass: 自 1.59.0 起

此选项告诉 Sass 将特定类型的弃用警告视为错误。例如，此命令告诉 Sass 将 / 作为除法运算的弃用警告视为错误

$ sass --fatal-deprecation=slash-div style.scss style.css
Error: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4, 2) or calc(4 / 2)

More info and automated migrator: /documentation/breaking-changes/slash-div

This is only an error because you've set the slash-div deprecation to be fatal.
Remove this setting if you need to keep using this feature.
  ╷
1 │ a { b: (4/2); }
  │         ^^^
  ╵
  style.scss 1:9  root stylesheet

以下弃用 ID 可传递给此选项

ID	版本	说明
`call-string`	0.0.0	直接将字符串传递给 `meta.call()`。
`elseif`	1.3.2	使用 `@elseif` 而不是 `@else if`。
`moz-document`	1.7.2	使用 `@-moz-document`（空 url 前缀 hack 除外）。
`new-global`	1.17.2	使用 `!global` 声明新变量。
`color-module-compat`	1.23.0	使用颜色模块函数代替普通CSS函数。
`slash-div`	1.33.0	使用 `/` 运算符进行除法运算。
`bogus-combinators`	1.54.0	前导、尾随和重复组合器。
`strict-unary`	1.55.0	模棱两可的 `+` 和 `-` 运算符。
`function-units`	1.56.0	向内置函数传递无效单位。
`duplicate-var-flags`	1.62.0	在单个变量声明中使用多个 `!global` 或 `!default` 副本。

或者，你可以传递一个 Dart Sass 版本，将该版本中存在的所有弃用视为错误。例如，--fatal-deprecation=1.33.0 会将上表中包括 slash-div 在内的所有弃用视为错误，但将任何较新的弃用保留为警告。

`--trace`–trace 链接

此标志告诉 Sass 在遇到错误时打印完整的 Dart 或 JavaScript 堆栈跟踪。Sass 团队使用它来调试错误。

$ sass --trace style.scss style.css
Error: Expected expression.
   ╷
42 │ h1 {font-face: }
   │                ^
   ╵
  themes/light.scss 42:16  root stylesheet

package:sass/src/visitor/evaluate.dart 1846:7                        _EvaluateVisitor._addExceptionSpan
package:sass/src/visitor/evaluate.dart 1128:12                       _EvaluateVisitor.visitBinaryOperationExpression
package:sass/src/ast/sass/expression/binary_operation.dart 39:15     BinaryOperationExpression.accept
package:sass/src/visitor/evaluate.dart 1097:25                       _EvaluateVisitor.visitVariableDeclaration
package:sass/src/ast/sass/statement/variable_declaration.dart 50:15  VariableDeclaration.accept
package:sass/src/visitor/evaluate.dart 335:13                        _EvaluateVisitor.visitStylesheet
package:sass/src/visitor/evaluate.dart 323:5                         _EvaluateVisitor.run
package:sass/src/visitor/evaluate.dart 81:10                         evaluate
package:sass/src/executable/compile_stylesheet.dart 59:9             compileStylesheet
package:sass/src/executable.dart 62:15                               main

`--help`–help 链接

此标志（缩写为 -h）打印此文档的摘要。

$ sass --help
Compile Sass to CSS.

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/>

...

`--version`–version 链接

此标志打印当前版本的 Sass。

$ sass --version
1.72.0

Dart Sass 命令行 界面

用法用法永久链接

一对一模式一对一模式永久链接

多对多模式多对多模式永久链接

选项选项永久链接

输入和输出输入和输出 永久链接

--stdin–stdin 永久链接

--indented–indented 永久链接

--load-path–load-path 永久链接

--pkg-importer=node–pkg-importer=node 永久链接

--style–style 永久链接

--no-charset–no-charset 永久链接

--error-css–error-css 永久链接

--update–update 永久链接

源映射源映射永久链接

--no-source-map–no-source-map 永久链接

--source-map-urls–source-map-urls 永久链接

--embed-sources–embed-sources 永久链接

--embed-source-map–embed-source-map 永久链接

其他选项其他选项永久链接

--watch–watch 永久链接

--poll–poll 永久链接

--stop-on-error–stop-on-error 永久链接

--interactive–interactive 永久链接

--color–color 永久链接

--no-unicode–no-unicode 永久链接

--quiet–quiet 永久链接

--quiet-deps–quiet-deps 链接

--fatal-deprecation–fatal-deprecation 链接

--trace–trace 链接

--help–help 链接

--version–version 链接