Escaping in LESS


I am trying to get the hang of LESS and i tried using escaping.

Here is what i tried to do:

@base-color: rgb(63,191,127);
@lin-grad: ~'linear-gradient';

background: @lin-grad(@base-color,spin(@base-color,150px));

The error i am getting is:

ParseError: Expected ‘)’ in background: linear-gradient(@base-color,spin(@base-color,150px));

However, for some reason this does not work. Likely that I am misusing it.

Any help is welcome!

Thanks, Nick

Ah, you need to interpolate the variable if you’re using escaping - @{the-variable}. I think you can just have the variable itself defined as @the-variable: foo, and it isn’t a string in your case. It’s been a very very long time since I used Less though so someone else might be better placed to help

Thanks for the pointer Dan,

i actually tried using interpolation beforehand and it did not work. I guess I will try doing it again and will see if it works.

Thanks for your help!


Doing it this way works.

@base-color: rgb(63,191,127);
@mystyle: linear-gradient(@base-color, spin(@base-color,150px));

body {
    background: @mystyle;


But the type of gradient isn’t a variable in this case.