少mixin，無法獲取backgroung-image的網址

Question

這裏我想創建一個較少的mixin。參數是品牌，應更改爲brand@2x.png。下面的代碼不起作用。

.bglogo (@brand) { 
    @brandurl: @brand + '@2x.png'; 
    background-image: url(@brandurl); 
} 

.span{ 
    .bglogo('brand'); 
} 

錯誤信息 -

Answer 1

你需要以串聯變量和字符串使用variable interpolation。

在你的情況，你會使用值"@{brand}@2x.png"：

.bglogo (@brand) { 
    @brandurl: "@{brand}@2x.png"; 
    background-image: url(@brandurl); 
} 

.span { 
    .bglogo('brand'); 
} 

結果：

.span { 
    background-image: url("brand@2x.png"); 
}