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でサイト全体に軽量を施すのがいいでしょう。

アウトップットの指定方法

koalaの場合

koalaウィンドウ右側の「Output style」からスタイルを指定。

sassコマンドの指定方法

コンパイル記述の後、 --style スタイル名と指定入力。

sass style.scss:compact.css --style compact  ←ここにスタイルを入力