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 聲明（在 expanded 輸出模式下）或位元組順序標記（在 compressed 輸出模式下）。
$ 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 產生的來源對應表如何連結回 contributing to the generated 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
--verbose–verbose 永久連結
這個標籤告訴 Sass 在編譯時發出*所有*棄用警告。預設情況下，當使用已棄用的功能時，Sass 只會針對特定棄用類型發出五個警告，並隱藏超出此數量的任何警告。
$ sass --verbose style.scss style.css--quiet–quiet 永久連結
這個標籤（縮寫為 -q）告訴 Sass 在編譯時不要發出任何警告。預設情況下，當使用已棄用的功能或遇到@warn 規則時，Sass 會發出警告。它也會隱藏 @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。 |
moz-document | 1.7.2 | @-moz-document。 |
relative-canonical | 1.14.2 | 使用相對標準 URL 進行導入。 |
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 | 對一個變數多次使用 !default 或 !global。 |
null-alpha | 1.62.3 | 在 JS API 中將 null 作為 alpha 傳遞。 |
abs-percent | 1.65.0 | 將百分比傳遞給 Sass 的 abs() 函式。 |
fs-importer-cwd | 1.73.0 | 使用目前工作目錄作為隱式載入路徑。 |
css-function-mixin | 1.76.0 | 函式和 mixin 名稱以 – 開頭。 |
mixed-decls | 1.77.7 | 巢狀規則之後或之間的宣告。 |
feature-exists | 1.78.0 | meta.feature-exists |
color-4-api | 1.79.0 | 內建 sass:color 函式的某些用法。 |
color-functions | 1.79.0 | 使用全域色彩函式而不是 sass:color。 |
legacy-js-api | 1.79.0 | 舊版 JS API。 |
或者，您可以傳遞 Dart Sass 版本，以將該版本中存在的所有棄用視為錯誤。例如，`--fatal-deprecation=1.33.0` 會將上表中直到 `slash-div` 的所有棄用視為錯誤，但將任何較新的棄用保留為警告。
--future-deprecation–future-deprecation 永久連結
- Dart Sass
- 自 1.59.0 版本起
這個選項告訴 Sass 提早選擇加入未來的棄用警告類型，即使棄用尚未生效也會發出警告。此選項可以與 `--fatal-deprecation` 結合使用，以便針對未來的棄用發出錯誤而不是警告。
$ sass --future-deprecation=import style.scss style.css
Deprecation Warning on line 1, column 9 of style.scss:
Sass @import rules will be deprecated in the future.
Remove the --future-deprecation=import flag to silence this warning for now.
╷
1 │ @import 'dependency';
│ ^^^^^^^^^^^^
╵
可以將以下棄用 ID 傳遞給這個選項
| ID | 說明 |
|---|---|
import | @import 規則。 |
global-builtin | 在 sass: 模組中可用的全域內建函式。 |
--silence-deprecation–silence-deprecation 永久連結
- Dart Sass
- 自 1.74.0 版本起
如果您希望暫時忽略棄用，這個選項會告訴 Sass 隱藏特定類型的棄用警告。上面 `--fatal-deprecation` 章節中列出的任何棄用都可以在這裡傳遞，但不支援傳遞版本。
$ sass --silence-deprecation=slash-div 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–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.79.4