Compile one less-file into many css-files

Question

Assuming we have a main.css, which has the following content (of course, this scenario is VERY simplified):

body {
  background-color: #ffffff;
}

However, there are also themes, which have a different background-color. So we end up having five different css-files:

main.css
main_blue.css
main_red.css
main_yellow.css
main_green.css

But now it's really not maintainable anymore. If I have to change something in main.css, I also have to change the other files!

So I was browsing in the internet and had a glance at http://lesscss.org/ which seemed pretty promising. However, neither do I know about how I could compile one less-file into multiple css files. Nor do I know if that would be the right approach. The idea of declaring variables at the top of the css-file delights me, though.

So I wonder: Is LESS capable of solving this problem? (And if so, how?) Or are there better ways to solve this?

Less can help you here. You can use variables in the main.less file and then have different values just for the variables in each individual theme file (along with a import reference to your main Less file) and while compiling, Less compiler can create different theme files for you depending on the variable value. Unfortunately, I am typing this from my hand-phone so can't give a working sample. — Harry
– Harry, Commented Jan 20, 2015 at 10:57
As @Harry said, you can use variables. Make one like @mainColor: #someHEXValue; and use that variable throught the whole stylesheet. And it's easy to change it, like @mainColor: #newHEXValue; — Vucko
– Vucko, Commented Jan 20, 2015 at 11:08
@Harry Thank you! I think I know exactly what you mean. So I define variables in the main.less and when I import it I simply change the variables (if necessary) — Fabian Bigler
– Fabian Bigler, Commented Jan 20, 2015 at 11:10
@Vucko That's already clear to me. What I didnt grasp was the idea of importing the file and then only change the variables. — Fabian Bigler
– Fabian Bigler, Commented Jan 20, 2015 at 11:12
@fabigler: Yep mate. Like what Vucko has posted above, your main.less could have say background-color: @theme-color and in the blue theme file you assign @theme-color: #00f; and in the red them as @theme-color: #f00;. Less does lazy loading of variables and so the latest value defined for the variable would win. — Harry
– Harry, Commented Jan 20, 2015 at 11:13

Fabian Bigler · Accepted Answer · 2015-01-20 11:32:30Z

4

Thanks to Harry's comment I ended up with the following solution: For each theme simply create another .less-file with the following content:

@import "main.less";
@mainbackground-color: #96c8fd;

Note that more variables will follow after the import.

answered Jan 20, 2015 at 11:32

Fabian Bigler

10.9k6 gold badges52 silver badges74 bronze badges

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

Collectives™ on Stack Overflow

Compile one less-file into many css-files

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