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

⚠️ Heads up!

Ruby Sass は既にサポート終了しており、現在完全にメンテナンスされていません。Dart Sass または LibSass にできるだけ早く 切り替えてください。

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

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

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

sass [input.scss] [output.css]

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

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

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

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

多対多モードは、1つ以上の入力ファイルを1つ以上の出力ファイルにコンパイルします。入力と出力はコロンで区切られます。また、ディレクトリ内のすべての Sass ファイルを、別のディレクトリ内の同じ名前の CSS ファイルにコンパイルすることもできます。引数にコロンが含まれている場合、または--update フラグまたは--watch フラグ 渡された場合、多対多モードが有効になります。

対応する出力ファイルなしで入力ファイルが渡された場合、入力ファイル名に基づいて、拡張子を .css に置き換えた CSS ファイルにコンパイルされます。対応する出力ディレクトリなしで入力ディレクトリが渡された場合、その中のすべての Sass ファイルは同じ ディレクトリ内の CSS ファイルにコンパイルされます。

$ sass style.scss:style.css
      write style.css
      write style.css.map
$ sass light.scss:light.css dark.scss:dark.css
      write light.css
      write light.css.map
      write dark.css
      write dark.css.map
$ sass themes:public/css
      write public/css/light.css
      write public/css/light.css.map
      write public/css/dark.css
      write public/css/dark.css.map

ディレクトリ全体をコンパイルする場合、Sass は名前が _ で始まるパーシャルファイルを無視します。パーシャルファイルを使用してスタイルシートを分割することで、不要な出力 ファイルが大量に作成されるのを防ぐことができます。

多対多モードは、依存関係が対応する CSS ファイルが生成された時刻よりも最近変更されているスタイルシートのみをコンパイルします。また、スタイルシートの更新時にステータスメッセージを出力します。

オプションオプションパーマリンク

共通共通パーマリンク

--load-path–load-path パーマリンク

このオプション (略記 -I) は、Sass がスタイルシートを検索するための追加のロードパスを追加します。複数のロードパスを提供するために複数回渡すことができます。前のロードパスは後の ロードパスよりも優先されます。

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

ロードパスは、設定されている場合は、SASS_PATH 環境変数からも読み込まれます。この変数は、; (Windows) または : (その他のオペレーティングシステム) で区切られたパスのリストである必要があります。SASS_PATH のロードパスは、コマンド ラインで渡されたロードパスよりも優先されます。

$ SASS_PATH=node_modules/bootstrap/dist/css sass style.scss style.css

--require–require パーマリンク

このオプション (略記 -r) は、Sass を実行する前に Ruby gem をロードします。Ruby で定義された関数を Sass 環境にロードするために使用できます。

$ sass --require=rails-sass-images style.scss style.css

--compass–compass パーマリンク

このフラグは Compass フレームワーク をロードし、そのミックスインと関数を Sass で使用できるようにします。

$ sass --compass style.scss style.css

--style–style パーマリンク

このオプション (略記 -t) は、結果の CSS の出力スタイルを制御します。Ruby Sass は 4 つの出力 スタイルをサポートしています。

  • nested (デフォルト) は、Sass ソースのネストに合わせて CSS ルールをインデントします。
  • expanded は、各セレクタと宣言をそれぞれ別の 行に書き出します。
  • compact は、各 CSS ルールをそれぞれ別の単一行に配置します。
  • compressed は、余分な文字をできるだけ削除し、スタイルシート全体を単一行に 書き出します。
$ sass --style=nested
h1 {
  font-size: 40px; }
  h1 code {
    font-face: Roboto Mono; }

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

$ sass --style=compact style.scss
h1 { font-size: 40px; }
h1 code { font-face: Roboto Mono; }

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

--help–help パーマリンク

このフラグ (略記 -h および -?) は、この ドキュメントの概要を出力します。

$ sass --help
Usage: sass [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.

...

--version–version パーマリンク

このフラグは、現在の Sass のバージョンを出力します。

$ sass --version
Sass 3.7.4

監視と更新監視と更新 パーマリンク

これらのオプションは、多対多 モードに影響します。

--watch–watch パーマリンク

多対多モードを有効にし、Sass が開いたままになり、スタイルシートまたはその依存関係が 変更されるたびにスタイルシートのコンパイルを続けます。

$ sass --watch themes:public/css
      write public/css/light.css
      write public/css/light.css.map

​# Then when you edit themes/dark.scss...
      write public/css/dark.css
      write public/css/dark.css.map

--poll–poll パーマリンク

このフラグは、--watch と一緒にのみ渡すことができます。これは、Sass に対して、ソースファイルの変更を手動で定期的に確認するように指示し、オペレーティングシステムが何かが変更されたときに通知する機能に依存しないようにします。これは、オペレーティングシステムの通知システムが機能しないリモートドライブで Sass を編集する場合に必要になる場合があります。

$ sass --watch --poll themes:public/css
      write public/css/light.css
      write public/css/light.css.map

​# Then when you edit themes/dark.scss...
      write public/css/dark.css
      write public/css/dark.css.map

--update–update パーマリンク

このフラグは、引数にコロンで区切られたペアが ない場合でも、多対多モードを有効にします。

$ sass --update style.scss
      write style.css
      write style.css.map

--force–force パーマリンク

このフラグ (略記 -f) は、多対多モードでのみ渡すことができます。これにより、Sass ファイルは、ソースファイルが出力よりも新しい場合にのみコンパイルされるのではなく、常に CSS ファイルに コンパイルされます。

--force フラグは、--watch フラグと一緒に渡すことはできません。

$ sass --force style.scss:style.css
      write style.css
      write style.css.map

--stop-on-error–stop-on-error パーマリンク

このフラグは、多対多モードでのみ渡すことができます。これは、エラーが検出されたときに Sass がすぐにコンパイルを停止するように指示し、エラーが含まれていない可能性のある他の Sass ファイルのコンパイルを試行しないようにします。

$ sass --stop-on-error themes:public/css
Error: Invalid CSS after "h1 {font-size: ": expected expression (e.g. 1px, bold), was "}"
        on line 1 of test.scss
  Use --trace for backtrace.

入力と出力入力と出力 パーマリンク

これらのオプションは、Sass が入力ファイルを読み込む方法と出力 ファイルを作成する方法を制御します。

--scss–scss パーマリンク

このフラグは、Sass に対して 標準入力SCSS として解析するように指示します。

$ echo "h1 {font-size: 40px}" | sass --scss
h1 {
  font-size: 40px;
}

--sourcemap–sourcemap パーマリンク

このオプションは、Sass がソースマップを生成する方法を制御します。ソースマップは、CSS を消費するブラウザやその他のツールに、その CSS が生成された Sass ファイルに対応する方法を伝えるファイルです。これにより、ブラウザで Sass ファイルを表示したり、編集したりすることが可能になります。ChromeFirefox でソースマップを使用するための手順を参照してください。4 つの可能な 値があります。

  • auto (デフォルト) は、可能な限りソースマップから Sass スタイルシートへのリンクに相対 URL を使用し、それ以外の場合は絶対 file: URL を使用します。
  • file は、常に絶対 file: URL を使用して、ソースマップから Sass スタイルシートへのリンクを作成します。
  • inline は、Sass スタイルシートのテキストをソースマップに 直接含めます。
  • none は、ソースマップをまったく生成しません。
​# Generates a URL like "../sass/style.scss".
$ sass --sourcemap=auto sass/style.scss css/style.css

​# Generates a URL like "file:///home/style-wiz/sassy-app/sass/style.scss".
$ sass --sourcemap=file sass/style.scss css/style.css

​# Includes the full text of sass/style.scss in the source map.
$ sass --sourcemap=inline sass/style.scss css/style.css

​# Doesn't generate a source map.
$ sass --sourcemap=none sass/style.scss css/style.css

--stdin–stdin パーマリンク

このフラグ(短縮形は-s)は、Sassに入力ファイルを標準入力から読み込むよう指示します。このフラグが渡された場合、入力ファイルは渡すことができません。

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

--stdinフラグは、多対多モードでは使用できません。

--default-encoding–default-encoding permalink

このオプション(短縮形は-E)は、文字エンコーディングを明示的に指定していないソースファイルを読み込む際にSassが使用するデフォルトの文字エンコーディングを制御します。デフォルトでは、オペレーティングシステムのデフォルトエンコーディングが使用されます。

$ sass --default-encoding=Shift-JIS style.scss style.css

--unix-newlines–unix-newlines permalink

このフラグは、Sassに対して、行がU+000A LINE FEED文字で区切られた出力ファイルを生成するよう指示します。これは、オペレーティングシステムのデフォルト(WindowsではU+000D CARRIAGE RETURNとU+000A LINE FEEDの組み合わせ)とは異なります。Unixスタイルの改行をデフォルトとするシステムでは常に有効です。

$ sass --unix-newlines style.scss style.css

--debug-info–debug-info permalink

このフラグ(短縮形は-g)は、各スタイルルールがソーススタイルシートのどこに定義されているかを示すダミーの@mediaクエリをSassが出力するようにします。

⚠️ Heads up!

このフラグは、後方互換性のためにのみ存在します。現在、ソースマップはCSSを生成元のSassにマッピングする推奨方法です。

$ sass --debug-info style.scss
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/style-wiz\/sassy-app\/style\.scss}line{font-family:\000031}}
h1 {
  font-size: 40px; }

--line-comments–line-comments permalink

このフラグ(--line-numbersとしても使用可能、短縮形は-l)は、各スタイルルールがソーススタイルシートのどこに定義されているかを示すコメントをSassが出力するようにします。

$ sass --line-numbers style.scss
/* line 1, style.scss */
h1 {
  font-size: 40px; }

その他のオプションOther Options permalink

--interactive–interactive permalink

このフラグ(短縮形は-i)は、Sassをインタラクティブモードで実行するよう指示します。このモードでは、SassScript式を記述して結果を確認できます。インタラクティブモードは変数もサポートしています。

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

--check–check permalink

このフラグ(短縮形は-c)は、その入力ファイルを実行せずに構文が有効かどうかを確認するようSassに指示します。構文が有効な場合、ステータス0で終了します。多対多モードでは使用できません。

$ sass --check style.scss

--precision–precision permalink

このオプションは、10進数を生成する際に使用する精度の桁数をSassに指示します。

$ echo -e 'h1\n  font-size: (100px / 3)' | sass --precision=20
h1 {
  font-size: 33.333333333333336px; }

--cache-location–cache-location permalink

このオプションは、解析済みファイルのキャッシュを保存する場所をSassに指示し、今後の呼び出しを高速化します。デフォルトは.sass-cacheです。

$ sass --cache-location=/tmp/sass-cache style.scss style.css

--no-cache–no-cache permalink

このフラグ(短縮形は-C)は、Sassに対して解析済みファイルを全くキャッシュしないよう指示します。

$ sass --no-cache style.scss style.css

--trace–trace permalink

このフラグは、エラーが発生した場合に完全なRubyスタックトレースを出力するようSassに指示します。Sassチームによるエラーデバッグに使用されます。

Traceback (most recent call last):
        25: from /usr/share/gems/sass/bin/sass:13:in `<main>'
        24: from /usr/share/gems/sass/lib/sass/exec/base.rb:18:in `parse!'
        23: from /usr/share/gems/sass/lib/sass/exec/base.rb:50:in `parse'
        22: from /usr/share/gems/sass/lib/sass/exec/sass_scss.rb:63:in `process_result'
        21: from /usr/share/gems/sass/lib/sass/exec/sass_scss.rb:396:in `run'
        20: from /usr/share/gems/sass/lib/sass/engine.rb:290:in `render'
        19: from /usr/share/gems/sass/lib/sass/engine.rb:414:in `_to_tree'
        18: from /usr/share/gems/sass/lib/sass/scss/parser.rb:41:in `parse'
        17: from /usr/share/gems/sass/lib/sass/scss/parser.rb:137:in `stylesheet'
        16: from /usr/share/gems/sass/lib/sass/scss/parser.rb:697:in `block_contents'
        15: from /usr/share/gems/sass/lib/sass/scss/parser.rb:707:in `block_child'
        14: from /usr/share/gems/sass/lib/sass/scss/parser.rb:681:in `ruleset'
        13: from /usr/share/gems/sass/lib/sass/scss/parser.rb:689:in `block'
        12: from /usr/share/gems/sass/lib/sass/scss/parser.rb:697:in `block_contents'
        11: from /usr/share/gems/sass/lib/sass/scss/parser.rb:708:in `block_child'
        10: from /usr/share/gems/sass/lib/sass/scss/parser.rb:743:in `declaration_or_ruleset'
         9: from /usr/share/gems/sass/lib/sass/scss/parser.rb:820:in `try_declaration'
         8: from /usr/share/gems/sass/lib/sass/scss/parser.rb:1281:in `rethrow'
         7: from /usr/share/gems/sass/lib/sass/scss/parser.rb:807:in `block in try_declaration'
         6: from /usr/share/gems/sass/lib/sass/scss/parser.rb:999:in `value!'
         5: from /usr/share/gems/sass/lib/sass/scss/parser.rb:1161:in `sass_script'
         4: from /usr/share/gems/sass/lib/sass/script/parser.rb:68:in `parse'
         3: from /usr/share/gems/sass/lib/sass/script/parser.rb:855:in `assert_expr'
         2: from /usr/share/gems/sass/lib/sass/script/lexer.rb:240:in `expected!'
         1: from /usr/share/gems/sass/lib/sass/scss/parser.rb:1305:in `expected'
test.scss:1: Invalid CSS after "h1 {font-size: ": expected expression (e.g. 1px, bold), was "}" (Sass::SyntaxError)

--quiet–quiet permalink

このフラグ(短縮形は-q)は、コンパイル時に警告を出力しないようSassに指示します。デフォルトでは、非推奨の機能が使用された場合、または@warnルールが検出された場合、Sassは警告を出力します。@debugルールも無効になります。

$ sass --quiet style.scss style.css