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の開発環境
-,

執筆者:

関連記事

RVMが大変そうなので寄付した

クリスマスだしね 🙂 rvm.io/ www.bountysource.com/fundraisers/489-rvm-2-0 $10以上で名前が乗るよ $15以上でステッカーもらえるよ

ActiveRecord使い方まとめ

By: North Carolina National Guard – CC BY 2.0 ActiveRecord入門|ドットインストールをみて個人的まとめ ActiveRecord4の …

no image

Rails3.2でCoffeeScriptをerbテンプレートとして使う件

目次1 リンクのリモートオプションをTrueにする(フォーマットをjsにする設定をしても必要)2 コントローラーでjsフォーマットを有効にする3 viewディレクトリ以下に.js.coffee拡張子で …

ThoughtBotの『Backbone.js on Rails』の目次と見出しをななめ読み

By: John – CC BY 2.0 learn.thoughtbot.com/products/1-backbone-js-on-rails 買いました 電子書籍で137ページに$4 …

assets:compileし直すときassets:cleanしておくとgitが自動でrenameしてくれて便利

By: Niran V V   アセットパイプラインはプロダクション環境にデプロイするときにJavaScriptやCSSをCoffeeScriptやSASS/SCSSからそれぞれ1つのファイ …