JavaScript Railsで使えるGem RubyOnRails RubyOnRailsの開発環境

Ruby+guardでSass+Compass+CoffeeScriptの自動コンパイル環境を整える

投稿日:

 

 

Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript

すでにCoffeeScriptを自動Makeする環境があるので、guardでsassもコンパイルできるようにしてみた.

インストール

github.com/hawx/guard-sass

Guardfile

すでにGuardfileがある場合はsass用の設定を追記してくれる

デフォルトのとおりにディレクトリを用意する

これでguardを起動してsassディレクトリにsassかscssファイルを作成すれば、cssディレクトリにcssファイルをコンパイルしてくれる.

ただし、_ではじまるファイルはコンパイルされない.その代わりにmixinというよく使う表現をライブラリ化する機能を使える

Sassを試してみる

my.scssというファイルを作成して

こんな感じで書けば自動でcss/my.cssを作成してくれる.

ここで注意が必要なのは、sassという拡張子にした場合はsassの記法で書かないとエラーがでること.

sassとscssとどちらにするべきかは悩ましいところだけど、他所からコピペしてくるには従来のcss記法に近いほうが便利なので、scssでやることにした.

scss/sassについてはドットインストールのSassの基礎 (全15回)を参照(ここでもscssで解説している)

Compassを導入

compass公式

 #334 Compass & CSS Sprites

Compassの基礎 (全7回)

compass createで必要なファイルを準備してくれる(今回は使わない)

Guardfile

ただし、このままだとimageやfontディレクトリの指定がRails3.1用になっているので、imageやfontを使う場合はディレクトリを指定する必要がある.(下の設定は未検証)

 

Compassを試してみる

リセットファイルが適用されて、ブラウザ特有のmarginとかがなくなっていればとりあえずOK

例のズルいデザイン

zurui-design // Speaker Deck

github.com/mahm/zurui-sass-rails

ただ、これはrails用なのでmixin用のファイルだけを抜いてくる

例えば、my.scssに@importを書いて、mixinを@includeすれば

これはsvgのうえにhtmlのp要素が乗っているんだけど、文字にドロップシャドウがついているのがわかる

(背景色もズルいグレーにしました)

2013-01-08_14h12_41

(光の向きを合わせるためにシャドウは右下に変えました)

ボタンとかも

心なしか自分がやると野暮ったい気がするのはなぜだろう

2013-01-08_14h12_51

*a要素じゃなくてbuttonだからと思って適当に設定しなかったのがいけなかった

2013-01-08_19h28_06

 

 

-JavaScript, Railsで使えるGem, RubyOnRails, RubyOnRailsの開発環境
-,

執筆者:

関連記事

TwitterBootstrapとGoogle Code Prittifyでうまくハイライトされないらしい

ディレクトリごとにrubyとjrubyを使い分ける〜ruby-version

By: DANIEL JULIE – CC BY 2.0 前は.rvmrcを使っていたけど、今は.ruby-versionを使うらしい [crayon-5bf1c56d38a4c27910 …

no image

Rails3のTest:Unitでベンチマーク

参考 Performance Testing Rails Applications — How To? 目次1 Gemfile2 サンプル作成3 実行 Gemfile デフォルトのテストはTest:u …

1から学ぶReact-Redux

By: Ian Sane – CC BY 2.0 目次1 React-Reduxとは2 create-react-app3 電卓のロジック4 reactで電卓の外観を作る5 reduxでと …

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …