Sassファイルのアウトプットスタイルを指定
sassコマンドやkoalaでコンパイルしたcssファイルはアウトプットスタイルを指定することで
可読性や機能性が異なる記述で出力されます。
現在あるスタイルは以下の4スタイル。
Nasted
Sassの階層をインデントで間を一つ開けるタイプ。
アウトプットスタイルのオプション指定をしないとすべて"Nasted"スタイルになる。
#main { width: 800px; height: 600px; } #main p { margin: 20px; color: #333; } #main p em { font-size: 0.8em; }
Expanded
DreamwWeaverを使用する人には慣れしたんだスタイル。
ルールセット事に区分けされた可読性が高いスタイル。
#main { width: 800px; height: 600px; } #main p { margin: 20px; color: #333; } #main p em { font-size: 0.8em; }
Compact
1つのルールセットを一行でまとめたスタイル。
異なるネストの場合は空白行を挟む。
#main { width: 800px; height: 600px; } #main p { margin: 20px; color: #333; } #main p em { font-size: 0.8em; } #sub p{ font-size: 0.5em;}
Compressed
可読性よりも軽量化を優先したスタイル。
compressorで圧縮出力されたように、コード内の改行、インデント、コメントが全て削除されたので
読み込み速度が比較的に上がっている。
#main{width:800px;height:600px}#main p{margin:20px;color:#333}#main p em{font-size:0.8em}
ここまでで、一番使用するのはExpandedが使い勝手がいいです。
サイトが完成した後に、Compressedでサイト全体に軽量を施すのがいいでしょう。
アウトップットの指定方法
sassコマンドの指定方法
コンパイル記述の後、 --style スタイル名と指定入力。
sass style.scss:compact.css --style compact ←ここにスタイルを入力