How to use Less in a rails 3.1 application?

Question

What is the easiest (is there an easy way?) to use Less (in combination with Sass/Scss) in the rails 3.1 assets pipeline?

I want to load a file like foo.css.less like i would do for bar.css.scss

I found some wonky solution that does not work for me (haven't tried a lot) : https://github.com/thisduck/ruby-less-js/issues/2

The idea would be to use Twitter Bootstrap in a clean way. Thanks in advance

Answer 1

Just ran across this, but haven't had a chance to test yet.

http://www.ciddennis.com/2011/09/getting-twitter-bootstrap-to-work-with-rails-31-asset-pipeline.html

Answer 2

If you only want to use bootstrap, you can do it by including the 'less-rails' and 'less-rails-bootstrap' gems in your GemFile.

Then, you can @import bootstrap in your .css.less files:

@import "twitter/bootstrap"

Alternatively, you can include each constituent file individually (excluding those you don't want):

// Reset
@import "twitter/bootstrap/reset";

// Core variables and mixins
@import "twitter/bootstrap/variables";

@import "twitter/bootstrap/mixins";

// Grid system and page structure
@import "twitter/bootstrap/scaffolding";

// Styled patterns and elements
@import "twitter/bootstrap/type";
@import "twitter/bootstrap/forms";
@import "twitter/bootstrap/tables";
@import "twitter/bootstrap/patterns";

If you don't want to use the less-rails-bootstrap gem for whatever reason, or you have non-bootstrap .less files that you want to include, you need to manually add your .less paths to the less-rails config. Note that none of this extra work is necessary if your filenames end in .css.less as the asset-pipeline should handle that compilation for you (as long as you've included 'less-rails'). This procedure is only required if you want to refer to external .less files directly in your app's .css.less files.

The setup I use for bootstrap is to copy the *.less files to vendor/assets/frameworks/twitter/bootstrap. Keeping the files in vendor/assets/stylesheets/... caused me some issues, probably due to Rails magic resolving my imports to the unprocessed .less files and not knowing what to do with them (this is only speculation on my part, I didn't look into it fully).

Once you've got the .less files in your project, you need to tell less-rails where to find them. Do that by putting the following in your application.rb.

YourApp::Application.configure do
  config.less.paths << File.join(Rails.root,'vendor','frameworks')
  # Should be set to true in production.
  config.less.compress = false
end

You can them import them in .css.less files by using:

@import "twitter/bootstrap/reset"
@import "twitter/bootstrap/variables"
...

Answer 3

see the discussion about different approaches here http://rubysource.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/

Answer 4

The guy from this blog post created the Less Rails gem.

It makes it easy to less in a Rails 3.1 project.

Answer 5

Just put your yourlessfile.less file into public/stylesheets, then in your view, include it with

stylesheet_link_tag "/stylesheets/yourlessfile.less", :rel => "stylesheet/less"

Don't forget include less.js in your view.