How to make LESS variables available to all CSS files in Rails?

Question

What I have:

In Rails 3.2.2, I have the following stylesheets:

  app / assets / stylesheets
     |
     | - application.css
     | - bootstrap_and_overrides.css.less
     |
     | - annotations.css.less
     | - maps.css.less.erb
     `- users.css.less.erb

The first two are more or less systemic. In other cases, I define my custom styles.

So, application.css , as usual, includes all the other files:

 *= require_self *= require_tree . 

And bootstrap_and_overrides.css.less , of course, includes Twitter Bootstrap, as well as some other user-modified LESS variables.

 @import "twitter/bootstrap/bootstrap"; @import "twitter/bootstrap/responsive"; // other stuff @brown_text: #332820; 

---

What does not work:

Now, in annotations.css.less , I would like to use @brown_text , but it gives me:

variable @brown_text is undefined

I believe this is due to the fact that there is no link from annotations.css.less to the "main" file where the variable will be defined. And it seems that annotations.css.less compiled first - note that I'm in the development environment right now.

So, how can I use my custom LESS variables and make them available in other stylesheets? My current “fix” is to simply move all my custom styles to bootstrap_and_overrides.css.less.erb , which is not very clean at all.

Which also does not work:

Simply import LESS files is not possible, as they use the Rails path helpers. And importing an ERB file is also impossible, because the @import statement @import not find the file because it expects a .less suffix.

Answer 1

You do not need to use ERB for helpers along the path to resources - they are actually baked into a gem with smaller rails, which you can mention here: https://github.com/metaskills/less-rails/#helpers

You should be able to simply use the resource path or asset URL, wherever you use ERB, to reference the asset pipeline.

Given this, the best way would be:

• Convert application.css to application.css.less
• Remove all Sprockets directives
• @import every single file in the directory.
• Remove the .erb extension from any files that have it, and replace the ERB asset assistants with lesser asset assistants.
• Make sure annotations.css.less imported after bootstrap_and_overrides - therefore, it is generally not recommended to use require_tree . since you cannot control the file upload order. Now that you have this, annotations.css.less will be loaded before bootstrap_and_overrides is loaded - before the variable you want to use even exists.

Hope this helps!

Answer 2

The twitter-bootstrap-rails way compiles things, you will need to import your other LESS style sheets into the overrides file. So, for the additional annotations.less file:

 @import "twitter/bootstrap/bootstrap"; @import "twitter/bootstrap/responsive"; //other LESS styles @import "annotations" 

For more, look at the less-rails that this stone uses below.