Question

I have to projects, basing on the same HTML and different CSS. I want to bring together the CSS definitions of those two projects in one Less file, with variables to define the differences.

Project 1:

.userbar {
    background: #fff;
}

Project 2:

.userbar {
    background:url(../images/bg-userbar.png) no-repeat 100% 100%;
}

The merged Less Code should be:

userbar {background: @bg_userbar}

Then I can define the color for project 1 like this:

@bg_userbar: #fff;

But for project 2, is this valid less code?

@bg_userbar: background:url(../images/bg-userbar.png) no-repeat 100% 100%;

Many thanks for your help!
Sascha.

Answer 1

I just spent some time again with this issue.

@bg_userbar: url(../images/bg-userbar.png) no-repeat 100% 100%;
.userbar {
    background:@bg_userbar;
}

is valid less code and compiles to

.userbar {
  background: url(../images/bg-userbar.png) no-repeat 100% 100%;
}

But thanks for the hint with escaping; although it’s not necessary.