达特·萨斯(Dart Sass)

用法永久链接用法

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

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

sass <input.scss> [output.css]

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

输入文件被解析为SCSS如果扩展名是.scss,由于缩进语法如果扩展名是.sass,或作为CSS如果扩展名是.css。如果它没有这三个扩展之一,或者它来自标准输入,则默认情况下将其解析为SCSS。这可以通过--indented标志来控制。

可以使用特殊字符串-代替输入文件,以告诉Sass从标准输入中读取输入文件。除非传递了标志,否则Sass将默认将其解析为SCSS--indented

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

兼容性:
Dart·Sass(Dart Sass)
从  1.4.0开始
sass [<input.css>:<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将忽略名称以开头的部分文件_。您可以使用partials分离样式表,而无需创建一堆不必要的输出文件。

选项永久链接选项

输入和输出固定链接输入和输出

这些选项控制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

该标志告诉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

–样式固定链接--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(Dart Sass)
从  1.19.0开始

该标志告诉Sass从不发出@charset声明或  UTF -8 字节顺序标记。默认情况下,或者如果--charset通过,则Sass将@charset在样式表包含任何非ASCII  字符时插入声明(在扩展输出模式下)或字节顺序标记(在压缩输出模式下)。

$ 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(Dart Sass)
自  1.20.0

当编译期间发生错误时,此标志告诉Sass是否发出CSS文件。此CSS文件描述了错误的意见,并content财产body::before,所以,你可以看到在浏览器中的错误信息,而无需切换回终端。

默认情况下,如果要编译到磁盘上的至少一个文件(与标准输出相反),则会启用错误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

兼容性:
Dart·Sass(Dart Sass)
从  1.4.0开始

如果--update传递了该标志,则Sass将仅编译样式表,这些样式表的依赖关系比 生成相应的CSS文件更晚。更新样式表时,它还将打印状态消息。

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

源地图永久链接源地图

兼容性:
Dart·Sass(Dart Sass)
从  1.3.0开始

源映射是告诉浏览器或使用CSS的其他工具的文件,该CSS  如何与生成CSS的Sass文件相对应。它们使您可以在浏览器中查看甚至编辑您的Sass文件。请参阅有关在ChromeFirefox中使用源地图的说明。

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

兼容性:
Dart·Sass(Dart Sass)
从  1.6.0开始

该标志的作用类似于该--update标志,但是在完成第一轮编译后,Sass保持打开状态,并在样式表或它们的依存关系发生更改时继续编译样式表。

$ 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

兼容性:
Dart·Sass(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

兼容性:
Dart·Sass(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

兼容性:
Dart·Sass(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

此标志(缩写-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(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

该标志(缩写-q)告诉Sass编译时不发出任何警告。默认情况下,当使用不赞成使用的功能或遇到@warn规则时,Sass会发出警告。这也使@debug规则无语。

$ sass --quiet style.scss style.css

–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

此标志(缩写-h)打印此文档的摘要。

$ sass --help
Compile Sass to CSS.

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

...

–版本永久链接--version

该标志显示Sass的当前版本。

$ sass --version
1.26.8