第8章 全機能Sassリファレンス

8-8 アウトプットスタイル

---------------------
▼Sass
#main {
	width: 600px;
	p {
		margin: 0 0 1em;
		em {
			color:#f00;
		}
	}
	small {
		font-size: small;
	}
}
---------------------


■ :nested
Sassのデフォルトのアウトプットスタイル。Sassのネストを維持した様なCSSになります。
---------------------
▼CSS(コンパイル後)
#main {
  width: 600px; }
  #main p {
    margin: 0 0 1em; }
    #main p em {
      color: #f00; }
  #main small {
    font-size: small; }
---------------------

■ :expanded
普通にCSSを書いたっぽい感じになります。可読性は高いですが、ファイル容量は大きくなります。
---------------------
▼CSS(コンパイル後)
#main {
  width: 600px;
}
#main p {
  margin: 0 0 1em;
}
#main p em {
  color: #f00;
}
#main small {
  font-size: small;
}
---------------------

■ :compact
シングルラインで書き出されます。可読性とファイル容量の中間くらいでしょうか。
---------------------
▼CSS(コンパイル後)
#main { width: 600px; }
#main p { margin: 0 0 1em; }
#main p em { color: #f00; }
#main small { font-size: small; }
---------------------

■ :compressed
可能な限り圧縮された状態で書き出されます。/* */ によるコメントも削除されます。
---------------------
▼CSS(コンパイル後)
#main{width:600px}#main p{margin:0 0 1em}#main p em{color:#f00}#main small{font-size:small}
---------------------