css - Less css: variables definition

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

第一个变量定义当然是有效的，对于第二个你只需要转义它：

@bg_userbar: #fff;
@bg_userbar: ~"url(../images/bg-userbar.png) no-repeat 100% 100%";

.userbar {background: @bg_userbar}

Answer 2

我刚刚又花了一些时间来解决这个问题。

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

是有效的更少代码并编译为

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

但是感谢您的转义提示；虽然没有必要。