LESS CSS установить динамическое фоновое изображение с миксином

Question

Я использую Меньше 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

Вы можете улучшить это, добавив первую часть пути к изображению в исходный миксин, так что вам нужно будет написать его только один раз:

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

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

Небольшое улучшение, но оно добавляет немного элегантности.