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

執筆者:

関連記事

CarrierWaveで添付したファイルをrroongaで全文検索

By: Alan Levine – CC BY 2.0 目次1 Carrierwave2 rroonga3 Gemfile4 application.rb5 config/initiali …

no image

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

  github.com/guard/guard github.com/guard/guard-livereload 目次1 自動make2 ブラウザの自動更新 自動make guardの準 …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD~fullcalendar-rails

目次1 前回2 READ ~データベースからイベントを読み込んでカレンダーに表示する3 CREATE~カレンダーからイベントを登録する4 UPDATE1~カレンダーのイベントをクリックしてイベントを編 …

Rails4で自動テスト環境を整える~cucumber&rspec&guard&spring&factory_girl

By: Tatsuo Yamashita – CC BY 2.0 参考 Rails3.2.8で自動テスト環境を整える〜cucumber+spork+guard Ruby2.0.0とRail …

RedcarpetでTOC表示

By: epSos .de – CC BY 2.0 目次1 Redcarpet2 Redcarpetの使い方3 TOCを表示する4 できた5 Bootstrapのaffixとscrolls …