CODEWITHSUNDEEP
htmlcssless
RadiantHex
RadiantHex

Reputation: 25557

LessCss - Creating themes (aka css files that use different variables)

I have the following file structure:

colors.less looks like:

@brand-primary-color: orange;
@brand-secondary-color: grey;

I would like to import colors.less in main.less, and have the variables used globally throughout the less files.

Creating themes would look something like this:

Can't find any way to do this!

The only method that seems to work is to import the colors.less file within each less sub-file. This makes creating themes a bit tedious...

Any ideas? :) Thanks guys!

Upvotes: 0

Views: 199

Answers (1)

Isaias Soares
Isaias Soares

Reputation: 111

Presuming main.less has CSS in it, all you have to do is create a file where you'd import all other less files. The file structure would look like:

  • final.less
    • modules
      • main.less
      • colors.less
      • header.less
      • footer.less
      • video_player.less
      • reset.less
      • base.less

After compiled, the final.css would be the CSS file containing everything. The final.less would look like: 

@import "main.less";
@import "colors.less";
@import "header.less";
@import "footer.less";
@import "video-player.less";
@import "reset.less";
@import "reset.less";

Last but not least, you should compile only final.less.

Upvotes: 2

Related Questions