OctopressでCSSを分かりやすい形で出力する

OctopressではデフォルトでCompass を使ってSassをCSSに変換していますが、 デフォルト設定では出来上がったスタイルシートは最小化されていて 見てももはや良くわかりません。

これはCompassのオプションを変えてあげれば変更することが出来るので、 見やすい出力用のタスクをRakefileに加えました。

• Compassのオプション
• nested用タスク

Compassのオプション

Compassでは

compass compile

でScssを一纏めにしてCSSに変換してくれるのですが、この時、 -s/--output-styleオプションを使ってその出力形式を変更できます。

Octopressでは、これがconfig.rbの中で

output_style = :compressed

と指定されています¹。

使える値はnested、expanded、compact、compressedの4つ。

下みたいなScssインプットを入れると

1
2
3
4
5
6

a {
  color: blue !important;
  &:hover {
    color: red !important;
  }
}

• nestedはScssみたいなネストっぽくインデントを無理やり入れて表示。 (ただし、括弧は実際にはネストされて無くて全て独立。)

1
2
3
4

a {
  color: blue !important; }
  a:hover {
    color: red !important; }

• expandedは一番素直にCSSを書いた感じ。

1
2
3
4
5
6

a {
  color: blue !important;
}
a:hover {
  color: red !important;
}

• compactはexpandedから括弧分などを1行にまとめたりしてコンパクトに。

1
2

a { color: blue !important; }
a:hover { color: red !important; }

• compressedは余計な空白や改行は全て取り払い最小化。

1

a{color:blue !important}a:hover{color:red !important}

といった感じです。

Scssで書いた結果、まとめた感じがどうなってるか見るには nestedがいい感じです。

ちなみに、現在使ってるscreen.cssのサイズを比べてみるとこんな感じでした。

compressでexpandedとかの20%近く減らせてる感じです。

元のSassファイルは合計で4倍くらいありました。

nested用タスク

下で作ったタスクの応用:

Octopress Tips: stylesheetsだけアップデートする

こんな感じ。

1
2
3
4
5
6

desc "Update stylesheets with nested style"
task :css_nested do
  raise "### You haven't set anything up yet. First run `rake install` to set up an Octopress theme." unless File.directory?(source_dir)
  puts "## Update stylesheets"
  system "compass compile -s nested --css-dir #{source_dir}/stylesheets"
end

css_nestedと言う新しいタスクを作ってcompassのコマンド部分に-s nestedを加えただけです。

上のリンクにある元のrake cssの方では最後にスタイルシートを publicディレクトリにコピーしてますが、ここではファイルを見てチェックする用なので sourceディレクトリに作るだけにしてあります。

これで、ちょっと気になった時に

$ rake css_nested
$ vim source/stylesheets/screen.css

で簡単にスタイルがチェックできるようになりました。