0

I would like to manage creation of different "theme" for my site, using LESS.

My idea is to generate different compiled .css files, using each time a specific variable.less that is imported by root file.

Here a simple example:

1) I have 2 different color scheme in 2 distinct files: variable1.less and variable2.less.

2) A file style.less should have an @import rule like "@import variableX.less" and obviously this 'X' should change assuming values '1' and '2'.

3) Compiler should then generate style1.css and style2.css, each based on relative variable1.less and variable2.less.

How to obtain this?

Improve this question

1 Answer 1

Reset to default
1

You need to flip your import directions.

The style.less file should not import any variables.

Instead, each variableN.less file should import style.less after defining all of its variables.
These files will then each compile to a full set of rules based on their variable values.

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

3 Comments

ehi... it seems the Coulumbus' egg :D But in this way... I have to compile each of them separatly, right? Is there no way to compile a single .less file but obtain 2 .css files ?
@LucaDetomi: No. But you could import style.less into two different body.SomeTheme selectors to generate two themes in the same file.
Yes, I knew this last proposal, but my intent is to create 2 different files because I don't provide a change theme on-the-fly, so it's better to load only one .css file per each theme, instead of a bigger single one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.