Reputation: 1057
I have a global.less file in my assets folder where I've defined many site-wide variables.
To use these variables in other less files, I currently put this at the top of each file:
@import 'global';
This loads everything fine, but now I have a copy of global loaded into each and every less file. I'm wondering if there is a way to write the import just once in the project, and have the other less files be able to access it?
Upvotes: 2
Views: 808
Reputation: 34072
There are just two small things you need to do to make this happen.
Make application.css
a .less file by renaming it to application.less
or application.css.less
.
Remove the require_tree .
sprocket directive, which would import the files in the stylesheets directory on its own, removing your ability to define the order.
Once those things are done, it should work as you expect, simply:
// in global.less
@foo: #FFFFFF;
// in foo.less
.foo {
background-color: @foo;
}
// and finally in application.less
@import 'global';
@import 'foo';
Upvotes: 3