おひさしぶりです。メガネです。今日は表題のとおりです。

• Foundation | The Most Advanced Responsive Front-end Framework from ZURB

を利用する際にCompass版を利用するときのtipsです。前提としてはCompass版のFoundationを利用するとします。もろもろ準備を済ませて

[code lang=text]
$ foundation new project-name
[/code]

とすれば一度に、ドバっと必要なファイルがダウンロードされて、即座に作業に入れるので気に入っています。その時のapp.scssに注目です。app.scssの中身は

[code lang=text]
@import "settings";
@import "foundation";

// Or selectively include components
// @import
// "foundation/components/accordion",
// "foundation/components/alert-boxes",
// "foundation/components/block-grid",
// "foundation/components/breadcrumbs",
// "foundation/components/button-groups",
// "foundation/components/buttons",
// "foundation/components/clearing",
// "foundation/components/dropdown",
// "foundation/components/dropdown-buttons",
// "foundation/components/flex-video",
// "foundation/components/forms",
// "foundation/components/grid",
// "foundation/components/inline-lists",
// "foundation/components/joyride",
// "foundation/components/keystrokes",
// "foundation/components/labels",
// "foundation/components/magellan",
// "foundation/components/orbit",
// "foundation/components/pagination",
// "foundation/components/panels",
// "foundation/components/pricing-tables",
// "foundation/components/progress-bars",
// "foundation/components/reveal",
// "foundation/components/side-nav",
// "foundation/components/split-buttons",
// "foundation/components/sub-nav",
// "foundation/components/switches",
// "foundation/components/tables",
// "foundation/components/tabs",
// "foundation/components/thumbs",
// "foundation/components/tooltips",
// "foundation/components/top-bar",
// "foundation/components/type",
// "foundation/components/offcanvas",
// "foundation/components/visibility";

[/code]

となっています。最初の2行がデフォルトで読み込まれるものですね。

• @import "settings";
  • 全体に影響するsettingを変更できるファイルの読み込み
• @import "foundation";
  • Foundationに関連するすべてのファイルの読み込み

ということです。このままでコンパイルすると結果として306KB程度のcssファイルが出来上がります。（compassの設定ファイルもデフォルトのため、scssの行番号表示と、読みやすい改行がされている。）

これはサイズが大きいですね。できることなら、最小限でもっと軽いcssファイルを読み込みたいものです。そこで、app.scssの2行より下にあるもののなかで必要なものだけをコメントアウトを外して利用します。

たとえばこんなかんじです。

[code lang=text]
@import "settings";
// @import "foundation";

// Or selectively include components
@import
// "foundation/components/accordion",
// "foundation/components/alert-boxes",
// "foundation/components/block-grid",
// "foundation/components/breadcrumbs",
// "foundation/components/button-groups",
"foundation/components/buttons",
// "foundation/components/clearing",
// "foundation/components/dropdown",
// "foundation/components/dropdown-buttons",
// "foundation/components/flex-video",
"foundation/components/forms",
"foundation/components/grid",
// "foundation/components/inline-lists",
// "foundation/components/joyride",
// "foundation/components/keystrokes",
// "foundation/components/labels",
// "foundation/components/magellan",
// "foundation/components/orbit",
// "foundation/components/pagination",
"foundation/components/panels",
// "foundation/components/pricing-tables",
// "foundation/components/progress-bars",
// "foundation/components/reveal",
// "foundation/components/side-nav",
// "foundation/components/split-buttons",
// "foundation/components/sub-nav",
// "foundation/components/switches",
// "foundation/components/tables",
// "foundation/components/tabs",
// "foundation/components/thumbs",
// "foundation/components/tooltips",
// "foundation/components/top-bar",
"foundation/components/type",
// "foundation/components/offcanvas",
"foundation/components/visibility";
[/code]

さらに、compassのコンパイル時の設定ファイルであるconfig.rbにおいて最小限の書き出しにします。output_styleをcompressedにするわけですね。

[code lang=text]
# You can select your preferred output style here (can be overridden via the command line):
output_style = :compressed
[/code]

参考:Compassの設定ファイル「config.rb」の編集方法

こうすると、書きだされるcssの容量は64KBと約5分の1にまでファイルサイズを削減出来ました。ちなみに、もとのapp.scssの設定のままでcompressedにするだけでも、147KBになります。なんとなく compressedがすごいだけでは。。となってきてしまったところで、本日のブログでした。

ちなみに、最新版のSassやCompassを利用すると

[code lang=text]
You're using Sass 3.4 or higher to compile Foundation. This version causes CSS classes to output incorrectly, so we recommend using Sass 3.3 or 3.2.
To use the right version of Sass on this project, run "bundle" and then use "bundle exec compass watch" to compile Foundation.
[/code]

というように低いバージョンをつかってねというエラーが出ます。この場合は、エラーに書いてある通り該当のディレクトリで

[code lang=text]
$ bundle
[/code]

とすると、推奨のSassとCompassをGemにインストールされます。（gemでbundlerがインストール済であること）つづいてcompass watchの代わりに

[code lang=text]
$ bundle exec compass watch
[/code]

とすれば推奨されたSassとCompassなどを利用してコンパイルをしてくれます。便利ですね。