Dart Sass コマンドラインインターフェース

使用方法使用方法パーマリンク

Dart Sass 実行ファイルは、2 つのモードのいずれかで呼び出すことができます。

一対一モード一対一モードパーマリンク

sass <input.scss> [output.css]

一対一モードは、単一の入力ファイル (input.scss) を単一の出力場所 (output.css) にコンパイルします。出力場所が渡されない場合、コンパイルされた CSS はターミナルに出力されます。

入力ファイルは、拡張子が .scss の場合は SCSS として、拡張子が .sass の場合はインデント構文として、拡張子が .css の場合はプレーン CSS として解析されます。これらの 3 つの拡張子のいずれも持たない場合、または標準入力から入力された場合は、デフォルトで SCSS として解析されます。これは --indented フラグで制御できます。

入力ファイルの代わりに特殊文字列 - を渡して、Sass に標準入力から入力ファイルを読み込ませることができます。標準入力。Sass は、--indented フラグが渡されない限り、デフォルトで SCSS として解析します。

多対多モード多対多モードパーマリンク

Dart Sass: 1.4.0 以降

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

多対多モードは、1 つ以上の入力ファイルを 1 つ以上の出力ファイルにコンパイルします。入力と出力はコロンで区切られます。また、ディレクトリ内のすべての 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 に @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 以降

このフラグは、コンパイル中にエラーが発生した場合に CSS ファイルを出力するかどうかを Sass に指示します。この CSS ファイルは、コメントと body::before の content プロパティにエラーを記述しているため、ターミナルに切り替える必要なく、ブラウザでエラーメッセージを確認できます。ターミナルに切り替える必要なく、ブラウザでエラーメッセージを確認できます。

デフォルトでは、標準出力ではなくディスク上の少なくとも 1 つのファイルにコンパイルする場合、エラー 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 は 2 つのタイプの 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 パーマリンク

このフラグは、生成された CSS に貢献した Sass ファイルの全内容をソースマップに埋め込むように Sass に指示します。これにより、非常に大きなソースマップが生成される可能性がありますが、CSS がどのように提供されていても、どのコンピューターでもソースが確実に利用可能になります。

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

`--embed-source-map`–embed-source-map パーマリンク

このフラグは、ソースマップファイルの内容を生成された CSS に埋め込むように Sass に指示します。これは、別々のファイルを作成して 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は非推奨機能が使用された場合、特定の非推奨の種類につき5つの警告のみを出力し、それ以降の警告は抑制します。

$ sass --verbose style.scss style.css

`--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。
`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	1つの変数に対して!defaultまたは!globalを複数回使用すること。
`null-alpha`	1.62.3	JS APIでアルファ値としてnullを渡すこと。
`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

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰
実装ガイド

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 パーマリンク

`--verbose`–verbose パーマリンク

`--quiet`–quiet パーマリンク

`--quiet-deps`–quiet-deps パーマリンク

`--fatal-deprecation`–fatal-deprecation パーマリンク

`--future-deprecation`–future-deprecation パーマリンク

`--silence-deprecation`–silence-deprecation パーマリンク

`--trace`–trace パーマリンク

`--help`–help パーマリンク

`--version`–version パーマリンク

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 パーマリンク

--verbose–verbose パーマリンク

--quiet–quiet パーマリンク

--quiet-deps–quiet-deps パーマリンク

--fatal-deprecation–fatal-deprecation パーマリンク

--future-deprecation–future-deprecation パーマリンク

--silence-deprecation–silence-deprecation パーマリンク

--trace–trace パーマリンク

--help–help パーマリンク

--version–version パーマリンク

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 パーマリンク

`--verbose`–verbose パーマリンク

`--quiet`–quiet パーマリンク

`--quiet-deps`–quiet-deps パーマリンク

`--fatal-deprecation`–fatal-deprecation パーマリンク

`--future-deprecation`–future-deprecation パーマリンク

`--silence-deprecation`–silence-deprecation パーマリンク

`--trace`–trace パーマリンク

`--help`–help パーマリンク

`--version`–version パーマリンク