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


