LESS css用mixin設置動態背景圖像

Question

我正在使用LESS CSS。

我目前使用混合變量。

事情是這樣的工作好：

.border-radius (@radius) { border-radius: @radius; } 

#header { .border-radius(4px); } 

這是不：

.bg-img(@img) { background-image:url(@img); } 

#logo { .bg-img("../images/logo.jpg"); } 

我曾嘗試'的背景圖像中&「：URL 使用的組合（ ''）& （「」）但它然後試圖獲取圖像images/@img，而不是圖像名稱。其他方面，它給了我一個錯誤
Cannot call method 'charAt' of undefined

我覺得寫background-image:url()一直都太乏味，這是可能的嗎？

Answer 1

:)得到我的答案！

它需要像這樣使用我的情況：通過將圖像路徑的第一部分的初始混入

.bg-img(@img) { background-image:url("@{img}"); } 

#logo { .bg-img("../images/logo.jpg"); } 

Answer 2

您可以進一步對這個提高，所以你只需要編寫一次：

.bg-img(@img) { background-image:url("../images/@{img}"); } 

#logo { .bg-img("logo.jpg"); } 

一個小改進，但確實增添了一點優雅。