Search code examples
asp.net-mvclessdotless

Can I use url parameters in LESS css?


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.


Solution

  • 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