[Sy] はじめての Sass (output-styleによる違い)

2018/02/27

前回 node-sass をインストールして Sass を使ってみました。コンパイル後の CSS の形式がデフォルトだとちょっと見づらいので、オプションを指定して出力される CSS の形式を変えてみます。

前回の記事はこちら。この環境を引き続き使います。

指定可能な出力形式を確認する

--help オプションを使って、どのような出力形式を指定できるのか確認してみます。

$ ./node_modules/.bin/node-sass --help
・
・
  Options
・
・
    --output-style             CSS output style (nested | expanded | compact | compressed)

--output-style というオプションがあるので、これっぽいですね。

説明を見ると、以下を選択できそうです。

それぞれ試してみましょう。

前回準備した、こちらの style.scss をコンパイルしていきます。

(style.scss)

body {
  color: #333;
  h1 {
    color: #666;
  }
}

では、--output-style を切り替えて、コンパイルを実行していきます。

$ ./node_modules/.bin/node-sass --output-style nested style.scss style-nested.css

(style-nested.css)

body {
  color: #333; }
  body h1 {
    color: #666; }

デフォルトはこの nested になってるようですね。

CSSの記法に置き換わっているものの、ネストした状態で表現されてます。

$ ./node_modules/.bin/node-sass --output-style expanded style.scss style-expanded.css

(style-expanded.css)

body {
  color: #333;
}

body h1 {
  color: #666;
}

一番馴染みのある CSSの形式になってます。

$ ./node_modules/.bin/node-sass --output-style compact style.scss style-compact.css

(style-compact.css)

body { color: #333; }

body h1 { color: #666; }

こちらもわかりやすいです。無駄な改行を省いてる？

$ ./node_modules/.bin/node-sass --output-style compressed style.scss style-compressed.css

(style-compressed.css)

body{color:#333}body h1{color:#666}

本番環境用など、ファイルサイズを圧縮したい場合に使うと良いですね。

それぞれ環境にあわせて使い分けると良さそうです。