2012年08月02日

railsでlessを使ってみる。 その1

Ruby on Rails ではcssを書くのにscssが標準ですが、最近流行のTwitter Bootstrap http://twitter.github.com/bootstrap/ がlessで書かれていたりするので、
twitter bootstrapをカスタムしつつlessを扱う為にrailsをless対応の手順を示します。

主にここのサイトに書いてある通りで行けます。
https://github.com/metaskills/less-rails/

まずはrails new (アプリ名は適当です。 -OはActive Record を作成しないオプション)
config.app_generators.stylesheet_engine :less


Gemfileを編集します。
gemfileの該当部を編集
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'therubyracer' # less-railsを使うのに必要
gem 'less-rails' # sass-railsを削除して、追加
gem 'coffee-rails', '~> 3.2.1'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platform => :ruby

gem 'uglifier', '>= 1.0.3'
end
終わったらbundle updateを叩く


config/application.rbを編集して下記を追加
config.app_generators.stylesheet_engine :less
ここまででganarateしてみます。
lestes]$ rails g controller top index
      create  app/controllers/top_controller.rb
       route  get "top/index"
      invoke  erb
      create    app/views/top
      create    app/views/top/index.html.erb
      invoke  test_unit
      create    test/functional/top_controller_test.rb
      invoke  helper
      create    app/helpers/top_helper.rb
      invoke    test_unit
      create      test/unit/helpers/top_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/top.js.coffee
      invoke    less
      create      app/assets/stylesheets/top.css.less

しっかりとlessで出力されて、lessを使う事ができます。
この後、rails sでサーバを起動して、 http://localhost:3000/top/index にアクセスすれば、top.css.lessがコンパイルされている事が分かると思います。

基本的にはcssを書いて行くのと同じノリです。
scssだとcompass等を入れてmixinを補いますが、
lessだと twitter bootstarpのlessおw見るのが良いと思います。
https://github.com/twitter/bootstrap/blob/master/less/mixins.less



///////
lessとscssを比べると、(僕の感想的には)scssの方が高機能なんだけど、
普通に使う分にはどっちも変わらないと思います。
詳しくは下記を見てみると良いと思います。
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞ http://dxd8.com/archives/217/
SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント - 眠る前に布団にはいろうか http://d.hatena.ne.jp/nenjiru/20111101/css_scss_less






ラベル:less rials
posted by ヤミタケ at 00:19| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。