达特·萨斯(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文件。请参阅有关在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
- 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