Using Less in a Rails 3.1 App

Question

I've just upgraded my application to the latest release of rails (3.1) and I'm wanting to integrate Twitter's Bootstrap into my application but it uses LESS and not SASS which is what Rails 3.1 uses by default.

How do I go about configuring Rails to use Less instead of Sass?

Answer 1

As apneadiving points out, Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS.

To configure your Rails app to support LESS, you can add the gem to the assets group of your Gemfile:

group :assets do
  gem 'less'
end

Then, run bundle install to get the less gem and its dependencies (which includes the libv8 gem, by the way, and can take awhile to install).

Now it's just a matter of using the .css.less extension with the stylesheets in your ./app/assets/stylesheets directory. Note that you won't get any helpful messages if you have any syntax errors in your LESS files (this tripped me up for a second).

Answer 2

For Rails 3.1, we now have @metaskill's less-rails gem which provides helpers etc. specific to Rails. It is fairly new but seems to be actively maintained.

You can also use the less-rails-bootstrap gem (by the same author) to pull in the bootstrap libraries.

gem 'less-rails'
gem 'less-rails-bootstrap'

Also see my post here about using Bootstrap and its mixins on Rails.

Answer 3

Pretty straight, see original doc here:

Styling with LESS

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

If the less gem is available to your application, you can use LESS to write CSS assets in Sprockets. Note that the LESS compiler is written in JavaScript, and at the time of this writing, the less gem depends on therubyracer which embeds the V8 JavaScript runtime in Ruby.

To write CSS assets with LESS, use the extension .css.less.