塩焼きブログ

塩焼きに関しての研究内容を公開しています

node-sassでSassファイルをコンパイルする

Sassのコンパイルに高速に動作するnode-sassを使います。node-sassのインストールは非常に簡単です。

インストール

npmを使う場合

npm install -g node-sass

yarnを使う場合

yarn global add node-sass

コンパイル

あとはコンパイルしたいファイルと出力先を指定するだけ。

node-sass test.scss test.css

CSSとHTMLだけの小型プロジェクトであれば、webpackなどを使ってwebpack.config.jsonとかpackage.jsonなどの設定ファイルを用意するよりも、node-sassだけで単発でコンパイルする方がプロジェクトが綺麗になるかと思います。

よく使うコマンド

ファイルを更新したら自動コンパイルする場合は-w--watchを付ける

node-sass test.scss test.css -w

--output-styleでコンパイル結果を調整できます。デフォルトはnestedになっていますが、出力結果のCSSを整形して出力するならexpandedを指定します。

node-sass test.scss test.css --output-style expanded

本番公開時に圧縮コンパイルする場合はcompressedを指定します。

node-sass test.scss test.css --output-style compressed

小技

catで流すこともできます

cat test.scss | node-sass > out.css

デフォルトはインデントのスペース数は2ですがこれは変更できます

node-sass test.scss test.css --output-style expanded --indent-width 4

インデントをタブにしたい時はタブにできます

node-sass test.scss test.css --output-style expanded --indent-type tab

その他いろんなオプションがあります(日本語訳しておきました)

-w、--watch                ディレクトリまたはファイルを見る
-r、--recursive            ディレクトリやファイルを再帰的に監視する
-o、--output               出力ディレクトリ
-x、--omit-source-map-url  出力からソースマップのURLコメントを省略する
-i、--indented-syntax      stdinのデータをsassコードとして扱う(対scss)
-q、--quiet                エラー以外のログ出力を抑止する
-v、--version              バージョン情報を表示します。
--output-style            CSS出力スタイル(ネストされた| expanded | compact | compressed)
--indent-type             出力CSSのインデントタイプ(スペース|タブ)
--undent-width            インデント幅。スペースまたはタブの数(最大値:10)
--linefeed               ラインフィードスタイル(cr | crlf | lf | lfcr)
--source-comments         出力にデバッグ情報を含める
--source-map              ソースマップを出力する
--source-map-contents     マップにインクルードした内容を埋め込む
--source-map-embed        データURIとしてsourceMappingUrlを埋め込む
--source-map-root         基本パスはそのままsource-mapに出力されます
--include-path            インポートされたファイルを探すパス
--follow                  symlinkedディレクトリに従う
--precision               10進数で許可される精度の量
--importer                カスタムインポーターを含む.jsファイルへのパス
--functions               カスタム関数を含む.jsファイルへのパス
--help                    ヘルプの表示

原文は以下

-w, --watch                Watch a directory or file
-r, --recursive            Recursively watch directories or files
-o, --output               Output directory
-x, --omit-source-map-url  Omit source map URL comment from output
-i, --indented-syntax      Treat data from stdin as sass code (versus scss)
-q, --quiet                Suppress log output except on error
-v, --version              Prints version info
--output-style             CSS output style (nested | expanded | compact | compressed)
--indent-type              Indent type for output CSS (space | tab)
--indent-width             Indent width; number of spaces or tabs (maximum value: 10)
--linefeed                 Linefeed style (cr | crlf | lf | lfcr)
--source-comments          Include debug info in output
--source-map               Emit source map
--source-map-contents      Embed include contents in map
--source-map-embed         Embed sourceMappingUrl as data URI
--source-map-root          Base path, will be emitted in source-map as is
--include-path             Path to look for imported files
--follow                   Follow symlinked directories
--precision                The amount of precision allowed in decimal numbers
--importer                 Path to .js file containing custom importer
--functions                Path to .js file containing custom functions
--help                     Print usage info