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

執筆者:

関連記事

Rails3.2でdocxを作成

目次1 途中経過2 次にrubyのスクリプトから同じことをしてみる3 Railsから試してみる4 うまくいきました 途中経過 github.com/jawspeak/ruby-docx-templat

Rails4で複雑な検索〜Ransack

By: eric molina – CC BY 2.0 株価データをつかって複雑な絞り込み検索ができるようにしてみた データは、こちらのサンプルを使わせていただいた datawarehou …

no image

RailsでRedisを使う例のメモ

最近よく見かけるようなのでメモ Redisって大量にメモリを積んでないとダメかと思ってたけど、思ったよりいろんな方面に用途がありそう(リンク先の情報はわたしは未検証です) Redisの基礎 (全14回 …

KEN_ALL.CSVを使ってRailsで郵便番号を検索するサイトを作る2

環境 KEN_ALL.CSVを使ってRailsで郵便番号を検索するサイトを作る1 前回の課題一覧 ひらがな対応 郵便番号をハイフン付きで検索したとき 全角数字で検索したとき 2語以上のとき zip検索 …

Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminari

github.com/amatsuda/kaminari 目次1 Gemfile & bundle2 設置3 テーマの作成 Gemfile & bundle [crayon-5d2cd …