LESS CSS使用mixin设置动态背景图像

问题描述

| 我正在使用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

而不是图像名称。给我一个ѭ3的错误 我认为一直写

background-image:url()

太麻烦了，这有可能吗？     

解决方法

        :)得到了我的答案！ 在我的情况下，需要像这样使用它：

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

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

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

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

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

稍作改进，但确实增加了一些优雅。