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.

Constructive

<link rel="stylesheet" href="style.less?foo=bar" /> Will let you use the following less: @foo = bar; – Ataxia

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

Lucila

This is the answer I was hoping for! :D – Constructive

@Tigraine: how save is this? An attacker could easily inject malicious code into the stylesheets. – Chiquitachirico

Using this is not so straightforward. I had to create a @import "theme-param-default.less"; above my line @import "darkly-variables-@{theme}.less"; which contained @theme: dark; else there were compile issues. – Cherie

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.

Bouffant

Thanks, this is also something I need. There are cases when I would gladly accept more than one answer. This is one. – Constructive