こんにちは、デザインちーむのフモです。

ラクしてCSSを書くためにKoala使ってます。

	Koala（コアラ） Less, Sass, Compass , CoffeeScript を感覚的に使いやすくしたGUIアプリ。 アイコンもコアラでかわいい。 対応：windows, linux , mac

Sass・Compassを手軽に使えるアプリとして、弊社のつっつさんが紹介している「Compass.app」も便利です↓
CSS拡張メタ言語「Compass」をすぐに使える便利アプリ

でも早速問題が生まれた

KoalaでコンパイルしたCSS、書式が会社のと微妙に違う・・！

Koalaは自分ひとりだけでSass・Compass導入したいときとかすごく便利だと思うのですが、流石にこの状態だと実用的じゃありません。

Web上にある情報だけだと自分には足りないカスタマイズもあったので、メモがてらご紹介します。

環境はWindowsという想定でやっていきます。

設定ファイルを見つける

Koalaで出力するCSSルールを設定しているファイルはto_css.rbです。

ファイルの場所

C:\Program Files (x86)\Koala\rubygems\gems\sass-3.4.9\lib\sass\tree\visitors

※「C:\Program Files (x86)」の部分は、Koalaをインストールした場所によって異なります。

通常のSassを使った設定ファイルを変更するときは、PCに入れているRubyフォルダの中のto_css.rbを修正するのですが、Koalaの場合はKoala内にSassを持っているので、Koala内の設定ファイルをいじらないと何も変わらないのです。

カスタマイズする

• KoalaやSassのバージョンが上がったらリセットされてしまうので、カスタマイズファイルは別途保存してとっておくとよいかもしれません。
• 念のためto_css.rbのバックアップをとってからカスタムしてください
• カスタム前の部分はコメントアウトして残しておきましょう
• 変更箇所の前部分も一緒に載せるので、検索などして変更箇所を見つけてください

プロパティ前のtab（空白）数を2→4に変更

  def visit_prop(node)
    return if node.resolved_value.empty?
#変更前
#    tab_str = '  ' * (@tabs + node.tabs)

#変更後
    tab_str = '    ' * (@tabs + node.tabs)

CSSはこう変わる

/*変更前*/
.test1{
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

/*変更後*/
.test1{
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

セレクタを並列させないで一つずつ改行する

  def visit_rule(node)
    with_tabs(@tabs + node.tabs) do
#変更前
#      rule_separator = node.style == :compressed ? ',' : ', '
#変更後
        rule_separator = node.style == :compressed ? ',' : ",\n"

CSSはこう変わる

/*変更前*/
.test1, .test2, .test3, .test4{
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

/*変更後*/
.test1,
.test2,
.test3,
.test4{
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

開き括弧{の前の空白削除

      end_props, trailer, tabs  = '', '', 0
      if node.style == :compact
        separator, end_props, bracket = ' ', ' ', ' { '
        trailer = "\n" if node.group_end
      elsif node.style == :compressed
        separator, bracket = ';', '{'
      else
        tabs = @tabs + 1
#変更前
#        separator, bracket = "\n", " {\n"
#変更後
          separator, bracket = "\n", "{\n"

CSSはこう変わる

/*変更前*/
.test1 {
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

/*変更後*/
.test1{
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

閉じ括弧}の前の空白削除

        trailer = "\n" if node.group_end
#変更前
#       end_props = (node.style == :expanded ? "\n" + old_spaces : ' ')
#変更後
        end_props = (node.style == :expanded ? "\n" + old_spaces : '')

CSSはこう変わる

/*変更前*/
.test1{
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
 }

/*変更後*/
.test1{
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

閉じ括弧}の後改行する

      with_tabs(tabs) do
        node.children.each_with_index do |child, i|
          output(separator) if i > 0
          visit(child)
        end
      end

      output(end_props)
#変更前
#     output("}" + trailer)
#変更後
      output("\n}" + trailer)

CSSはこう変わる

/*変更前*/
.test1{
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;}

/*変更後*/
.test1{
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
}

カスタム完了

他にも変更したい箇所があれば、to_css.rbをじっくり見ていけば変更できると思います。

参考にした記事

• SassでコンパイルされるCSSの書式をカスタマイズする
• Sassで出力するCSSファイルを自社のCSS記述ルールに合わせるヒント