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

Question

I have the following file structure:

main.less
modules
- colors.less
- header.less
- footer.less
- video_player.less
- reset.less
- base.less

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:

brand-1.less

@import "themes/brand-1-colors.less"
brqand-2.less

@import "themes/brand-2-colors.less"
brand-3.less

@import "themes/brand-3-colors.less"
[...]

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!

Isaias Soares · Accepted Answer · 2014-04-02 14:07:20Z

2

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.

answered Apr 2, 2014 at 14:07

Isaias Soares

1111 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related