Sassコンパイラ「Prepross」とCSSフレームワーク「Gumby」で高速プロトタイピング

2013年11月15日 · by KaBuKi · in HTML5/CSS3

昨今注目度も高まっているSassを、最も簡単に使えるコンパイラ「Prepros」と、個人的に最近お気に入りのCSSフレームワーク「Gumby」を広めたくて書きます。

SassやCSSフレームワークとか、ちょっと二の足踏んじゃうな…みたいなノンプログラマーなフロントデザイナーの方ほどオススメです。

Preprosのインストール

Preprosをダウンロードしてインストールしたら、準備はそれで完了です。

ここはさすがに説明不要で終わると思います。

Gumbyのダウンロード

Gumbyトップページから落としてください。

カスタマイズダウンロードもできるので、多少変更しておきたい場合はここからダウンロードするのも良いです。ちなみにこれらのカスタマイズ項目は、Sassを使えば後から簡単に一括変更できます。

ダウンロードしたファイルを適当な場所に解凍してください。
解凍してできたフォルダを以後プロジェクトフォルダとして仮定します。

Preprosにプロジェクトを設定

Preprosを起動したら、右側のブランクにプロジェクトフォルダをポイッと投げるか右上の [+] ボタンから、展開したプロジェクトフォルダを開いてください。

すると自動的にプロジェクト内の scss ファイルなどが読み込まれます。

試しにプロジェクトフォルダの「sass/gumby.scss」を適当に修正してみてください。
「.text{margin:0}」程度でOKです。

保存すると、画面右下にSassコンパイルエラーの表示が出たと思います。

通常のSassを利用したプロジェクトであればPreprosに読み込ませるだけで良いのですが、GumbyのSassは一部Rubyの数式ライブラリを利用しているため、設定が必要となります。

Prepros側の設定

Preprosでgumby.scssを選択し、下記2点をチェック。

Full Compass Support
Use Config.rb Options

すると、プロジェクトフォルダに「config.rb」というファイルが生成されるので、これをテキストエディタで開いて下記対象箇所を修正をしてください。

…
#extensions_dir = "sass/extensions"

#Compass::Frameworks.register('modular-scale', :path =&gt; File.expand_path("#{extensions_dir}/modular-scale"))
…
require 'modular-scale'
require 'sassy-math'
…

「extensions_dir」をコメントアウト
「Compass::Frameworks.register～」をコメントアウト
「require ‘modular-scale’」のコメントを外し有効化
「require ‘sassy-math’」のコメントを外し有効化

config.rb の設定を保存したあと、プロジェクトフォルダ内の「sass/gumby.scss」を適当に修正保存してみてください。正しく設定されていればコンパイルが通ります。

また config.rb にはSassからCSSへの出力形式も指定できます。

output_style = :compact

上記の値は [compressed / compact / nested / expanded] の4種類から設定できます。CSSファイルから改行を無くしてファイルサイズを削減したい時は「compressed」を選ぶと良いです。

Gumbyフレームワークをカスタマイズする

プロジェクトフォルダ内の ui.html を開いてください。
Gumbyは親切なことに全UIパターンを ui.html の中に収めてくれているので、カスタマイズする際はこのファイルを見ながら進めると良いです。

GumbyのUIは「css/gumby.css」に集約して定義されていますが、この出力元の「sass/gumby.scss」はsassフォルダ以下のモジュールを読み込んでおり、これ自体には基本的に手を入れません。

sassフォルダ以下で手を入れるべきファイルは主に下記です。

_custom.scss
サイト独自のCSSを自由に記述できるファイル。gumby.cssの末尾に出力される。
var/_setting.scss
Gumby内各種要素の色やサイズの数値などの変数が設定されている。

ボタンなどの色を変える時は _setting.scss を編集し、独自のCSSを追加したければ_custom.scssを編集するという形です。もちろん _custom.scss を使わずに独自のscssファイルを作っても問題ありません。

Gumbyをさらに自分色に染め上げたいという人は、クラス名などからモジュールscssファイルを洗い出して直接カスタマイズしても良いと思いますが、カスタマイズしすぎるとGumby本体のアップデートに対応しにくくなるので、_custom.scssでクラスに上書きする形が良いと思います。

まとめ

これでPreprosを使ってGumbyのSassをコンパイルできるようになり、手軽にカスタマイズできる環境が整いました。あとはGumbyのUIを活用してガシガシとプロトタイピングをしていくだけです。

Sassの文法などについては詳細な他所がたくさんあるのでそちらを参照してください。

最近のCSSフレームワークにはSassかLessのファイルが収められていることも多いので、Gumbyに限らず扱えるようになると思います。

筆者について

KaBuKi: ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。