较少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"); }

我尝试过使用'＆amp ;; “在background-image中：url （''）＆amp;（”“）但是它会尝试将图像作为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"); }

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