较少css用mixin设置动态背景图像

Question

我正在使用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"); }

我已尝试在background-image中使用'&'的组合: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

您可以通过将图像路径的第一部分添加到初始mixin来进一步改进,因此您只需编写一次:

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

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

一个小小的改进,但确实增加了一点优雅.