HTML & CSS

PreprosのCustom Rubyを使うことでGumbyコンパイルエラーを解決

WindowsでもCompass使えて、なおかつライブプレビューをしたいなーと思っていたところ、Preprosがいいという情報を見つけました。

つまり、HTMLやCSSを変更すると、即座にブラウザ上の編集しているページに変更が同期されるわけですね。
より直感的なコーディングが可能になります。

それで早速インストールして、使ってみたらこれがなかなか快適。
しかし、HTMLを変更してもそれはライブプレビューに反映されません。
これはProの機能だという事でProを購入しました。日本円で2500円くらいでした。

これでCSSフレームワークを使ってかっこいいサイトを作るぞ!と意気込み、フレームワークはGumbyが熱いという事で、これを使う事に。

しかし使い始めてしばらくして、トップのナビの色を変更したいなと思って該当のファイルをいじってみたところ(_setting.scss)、それ以降gumby.scssのコンパイルが通らなくなってしまいました。

ネットの情報を見てみたところ、こういう人は結構多いようで?
config.rbの中のコメントを外したりつけたりしたりだとか
参考:CSSフレームワーク「Gumby」について質問です。

などの情報がありまして、試してみたのですが解決しません。。。

custom Rubyにチェックを入れないといけないよ。
[SOLVED] Can’t compile gumby.scss that was generated by Claymate

という情報を見つけたので、これはPreprosについてくるCompassを使うのではなくて、マシンにインストールしたRubyを使うのだなと理解した私は、こっちにかけて見ることに。

とりあえず、rubyをWindows7のマシンにインストールするために、ソースコードからビルドとかちょっと不安だったのでインストーラーを使う事に
このページでx64のインストーラーをダウンロードして実行しました。
http://rubyinstaller.org/downloads/
インストールする時にPathを通すのもお忘れなく~。

それから
gem installコマンドを使って sass と compass をそれぞれインストール。
ついでにgumbyが使っている数式ライブラリである、modular-scalesassy-mathもインストールしておきました。

意気揚々とPreprosのオプション→Advanced Optionsから
Use Custom Rubyにチェックをいれ、For Sassにもチェックを入れ、いざコンパイル!
としてみたところ、やはり動かず。

config.rbをいじって該当箇所のコメントをつけたり外したりしてみたけどダメぽ。
PermissionDeniedとか出てきてWindowsでPermissionってどうするの?状態。

途方にくれていると、こちらの情報を見つけました。
なるほど、バージョンに依存するバグなのか?
参考:compassで自動コンパイルを設定した!

参考にさせていただいたサイト様の情報によると、以下の通り

1.コマンドプロンプト「gem uninstall sass gem uninstall compass」でsass/compassのアンインストールをする
2.コマンドプロンプト「gem install sass –-version “3.2.10″」でsassをインストールする
3.コマンドプロンプト「gem install compass –-version “0.12.2″」でcompassをインストールする

とあり、このバージョンを使えばうまく行くのかなあと、実際に試してみました。

上記は原文ママの引用ですが、私の使っているgemのバージョンではバージョンを指定するオプションは––versionでした。
つまり、gem install sass ––version “3.2.10″
とする事でコマンドを通す事が出来ました。

それでコンパイルをしてみましたが、やっぱりダメでした。
ダメ元でconfig.rbの構成を


# If you followed directions and ran 'gem install modular-scale' comment the next two lines out:
extensions_dir = "sass/extensions"

Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))

# Uncomment these to use regular Ruby gems.
# require 'modular-scale'
# require 'sassy-math'

と、マシンにインストールしたcustom rubyを使っているにもかかわらず、modular-scaleなどのライブラリはgumby付属のものを使うという設定にしてみたところ、
動いた━(゚∀゚)━!

という事で紆余曲折ありつつ、なんとかGumby.scssに触れる権利を手に入れました。
いやー、ハマったハマった。

CSSでの@font-face,つまりweb fontが使えない事でハマった件。前のページ

PreprosとCompassでCSS Spriteをやるときの覚書次のページ

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

Twitter

PAGE TOP