rcmdnk's blog

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

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

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

Sponsored Links

Compassのオプション

Compassでは

compass compile

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

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

output_style = :compressed

と指定されています1

使える値はnestedexpandedcompactcompressedの4つ。

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

Scss
1
2
3
4
5
6
a {
  color: blue !important;
  &:hover {
    color: red !important;
  }
}
  • nestedはScssみたいなネストっぽくインデントを無理やり入れて表示。 (ただし、括弧は実際にはネストされて無くて全て独立。)
nested
1
2
3
4
a {
  color: blue !important; }
  a:hover {
    color: red !important; }
  • expandedは一番素直にCSSを書いた感じ。
nested
1
2
3
4
5
6
a {
  color: blue !important;
}
a:hover {
  color: red !important;
}
  • compactはexpandedから括弧分などを1行にまとめたりしてコンパクトに。
nested
1
2
a { color: blue !important; }
a:hover { color: red !important; }
  • compressedは余計な空白や改行は全て取り払い最小化。
nested
1
a{color:blue !important}a:hover{color:red !important}

といった感じです。

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

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

option size (kB)
Sass 204
nested 68
expanded 68
compact 64
compress 56

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

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

nested用タスク

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

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

こんな感じ。

Rakefile
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

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

Sponsored Links
  1. output_style以外にも

    • sass_dir = "sass": 入力元(<sass_dir>/screen.scssがトップファイルになる
    • css_dir = "public/stylesheets": 出力先(<css_dir>/screen.cssが出力ファイルになる。
      • ただし、Octopressのタスクでは通常--css-dirで直接source/stylesheetsを指定して、一旦そこへ出力してからpublicへコピー、と言うことをしている。
    • line-comments = false: Css作成時に元ファイルの情報のコメントを書くかどうか(どのファイルのどの辺か、など。compressedでは何れにしろ無効。)。

    等、いくつか設定されています(直接CSS出力に関わるのは上記のオプション)。

Sponsored Links

« OctopressにGoogle翻訳を設置 MacでのLogMeInのアンインストール »