LESS css 使用 mixin 设置动态背景图像答案

【问题标题】：LESS css set dynamic background image with mixinLESS css 使用 mixin 设置动态背景图像
【发布时间】：2011-09-14 03:31:32
【问题描述】：

我正在使用LESS CSS 。

我目前正在使用带有变量的 Mixins。

这样的事情没问题：

.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()太乏味了，这可能吗..？

【问题讨论】：

【解决方案1】：

:) 得到了我的答案！

在我的情况下需要这样使用：

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

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

【讨论】：

【解决方案2】：

您可以通过将图像路径的第一部分添加到初始 mixin 来进一步改进这一点，这样您只需编写一次：

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

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

一个小小的改进，但确实增加了一点优雅。

【讨论】：