第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} ---------------------