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?

Answer 1

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.