較少css：變量定義

Question

我必須基於相同的HTML和不同的CSS項目。我想將這兩個項目的CSS定義放在一個Less文件中，並用變量來定義差異。

項目1：

.userbar { 
    background: #fff; 
} 

項目2：

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

合併後的更少的代碼應該是：

userbar {background: @bg_userbar} 

然後，我可以把顏色定義爲項目1這樣的：

@bg_userbar: #fff; 

但是對於項目2，這是否有效的代碼少了？

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

非常感謝您的幫助！ Sascha。

Answer 1

我只是花了一些時間再次與這個問題。

@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%; 
} 

但感謝與逃逸的提示;雖然沒有必要。

Answer 2

第一變量定義當然是有效的，對於第二個，你只需要逃避它：

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

.userbar {background: @bg_userbar}