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

執筆者:

関連記事

Gemfileのgroup :assets ってどういうことなのか

By: Horia Varlan – CC BY 2.0   group :development, :testってことだったんですね〜 How is the :assets g …

Ubuntu Server12.04でPostgreSQL9.3をつかう〜hstore

  By: Wonderlane – CC BY 2.0 Ubuntu server12.04にPostgreSQL9.3をインストールする hstoreモジュール(エクステンシ …

no image

MongoidでMapReduceに挑戦中

MongoDBの薄い本の素材をMongoidでやろうとしたけど途中経過 MapReduceをやることの利点は、並列処理ができるということとSQLより柔軟な処理なできるということらしい(MongoDBに …

no image

Rubyからdocxを生成する

    前提 Rubyでdocxをいろいろ分析してみた 変数の仕様~正規表現 いろいろなパターンで試してみた 例えば、こんな文 [crayon-5cba8588cf3c200175 …

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

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