Sassでコンパイル時の出力を変更するオプション

sassファイルをコンパイルして出力するときのスタイルを変更するオプションについて。
それぞれ出力したときのインデントが違います。

スタイルは4種類。
「:nested」「:expanded」「:compact」「:compressed」。

スタイルはコンパイル時に指定します。

$sass filename.scss filename.css --style expanded

オプションをつけないデフォルトの出力は「:nested」になります。

出力の例

file.scssを以下のように作りました。これを各スタイルでコンパイルします。

#main {
    margin: 10px;
    p {
        padding: 10px 5px;
        red {
            color: #D22B4C;
        }
    }
    .contents {
        font-size: 10em;
    }
}

:nested

#main {
  margin: 10px; }
  #main p {
    padding: 10px 5px; }
    #main p red {
      color: #D22B4C; }
  #main .contents {
    font-size: 10em; }

:expanded

#main {
  margin: 10px;
}
#main p {
  padding: 10px 5px;
}
#main p red {
  color: #D22B4C;
}
#main .contents {
  font-size: 10em;
}

:compact

#main { margin: 10px; }
#main p { padding: 10px 5px; }
#main p red { color: #D22B4C; }
#main .contents { font-size: 10em; }

:compressed

#main{margin:10px}#main p{padding:10px 5px}#main p red{color:#D22B4C}#main .contents{font-size:10em}

普段利用しているcssと同じ形式なら --style expanded を選択すればよさそうです。

スポンサードリンク

RSS購読のススメ

RSS

定期的に読んでいただけるかたはRSS登録しておくと便利です。RSS登録はこちら!!

びーおーぷんどっとねっとのRSS登録

Twitterでも情報をつぶやいているので、フォローしてみるといいかもしれません。

コメントを残す

サブコンテンツ

Profile

twitter

google+
@beopener12on Google+

Facebook

サイト内検索

記事を検索したいときはここにキーワードを入れて検索ボタンをクリックすれば見つかるかも・・・

スポンサードリンク

おすすめ

このページの先頭へ