sass - Sublime Text 2 Sass 閉じブレース

Question

SublimeSaveOnBuild を使用しています。私の scss ファイルが css にコンパイルされると、結果のコードは次のような閉じ中括弧を表示します。

.content {
    padding-left: 10px; }

従来の形式で閉じブレースを生成したいと思います。

.content {
    padding-left: 10px; 
}

これを自動的に達成する方法を知っている人はいますか?

Answer 1

style出力の外観を制御するSass 設定と呼ばれるものがあります。デフォルトはnestedで、これが表示されているものです。これを に切り替えるだけで、expanded希望するより伝統的な外観が得られます。

ドキュメントを参照して、セットアップに合わせて変更する正しい方法を見つけてください。

どのように見えるかを示すドキュメントの例を次に示します。

// nested
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

// expanded
#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

Answer 2

Grunt を使用している場合は、次のようなオプションを追加すると役立つ場合があります (grunt-contrib-sass を使用):

sass: {
      dist: {
        options: {
            style: 'expanded'
        }, 
        files: {
            'style.css' : 'sass/style.scss'
        }
      }
    }