変換後のCSSスタイル指定

「-t」オプションで変換後のCSSのスタイルを指定できます。

$ sass -t <スタイル> <変換元のSASS> <変換後のCSS>

「<スタイル>」として指定可能な値は以下の4つ。

	値		説明
	nested		SASSでの記述に似た感じのスタイルで出力します。(デフォルト)
	expanded		手書きのCSSに近い形にフォーマットします。「nested」ではインデントが保持されますが、「expanded」では削除されます。
	compressed		スペースや改行、コメントを除いた形式に出力します。
	compact		「expanded」と「compressed」の中間で、読みやすさをある程度保持しつつデータサイズが小さくなるような形で出力します。

以下は昨日のSASSを各スタイルで変換してみた例です。

変換前のSASS

/* 簡単なSASSの例
#nav 
  /* プロパティを区切る「;」や「{}」は不要。
  width: 650px
  ul li
    float: left 
    a
      display: block

nested

/* 簡単なSASSの例 */
#nav {
  /* プロパティを区切る「;」や「{}」は不要。 */
  width: 650px; }
  #nav ul li {
    float: left; }
    #nav ul li a {
      display: block; }

expanded

/* 簡単なSASSの例 */
#nav {
  /* プロパティを区切る「;」や「{}」は不要。 */
  width: 650px;
}
#nav ul li {
  float: left;
}
#nav ul li a {
  display: block;
}

compressed

#nav{width:650px}#nav ul li{float:left}#nav ul li a{display:block}

compact

/* 簡単なSASSの例 */
#nav { /* プロパティを区切る「;」や「{}」は不要。 */ width: 650px; }
#nav ul li { float: left; }
#nav ul li a { display: block; }