Can I use url parameters in LESS css?

Question

Intro:

I'm trying out LESS in an asp.net mvc environment.

I use dotless for server side processing (and I wouldn't want to use client side processing especially afer publishing the complete project).

I have to apply a design where there are different color schemes depending on different things (e.g. time of the day).

Less felt very powerful in this case as designing a parameterized css and only changing like 10 variables at the beginning of the file for every theme was really uplifting.

Problem:

But I would need to somehow change the color themes from an outside parameter.

Ideas:

First I thought that an URL parameter like style.less?theme=fuschia would be good, but I found no way to parse something like this.

Then I thought that making a very short blue.less, green.less, orange.less consisting only declared color variables, and including the main.less in every one of them would be a solid solution.

I had no chance to try out the second solution, but I thought this would be a good time to ask for advice on the most robust way of doing this.

The problem again is: I want to control some things in my less file from the outside.

Answer 1

Yes you can (because I implemented that feature for exactly that reason).

Dotless supports parameters from the outside via the querystring parameter.

<link rel="stylesheet" href="style.less?foo=bar" />

Will let you use the following less:

@foo = bar;

The parameter injection code is very simple. it just prepends the variable declarations to your normal less file, so anything that comes as a querystring parameter will follow the above syntax.

The code in question is very simple: https://github.com/dotless/dotless/blob/master/src/dotless.Core/Engine/ParameterDecorator.cs

Answer 2

AFAIK, you cannot pass parameters for dotnetless to use to do the compile.

As a suggestion, why not just call different less files? This would be fairly easy to do by using a Viewbag property.

To make the different less ones, You first create a less file with each set of colors in them. Then you import your base css file. dotnetless will merge the color definations in the parent file with the usages in the base file. So you have something like -

@baseGray: #ddd;
@baseGrayDark: darken(@baseGray, 15%);
@baseGrayLight: lighten(@baseGray, 10%);
@import "baseCss.less";

I just tested this on and MVC3 project and it works.