Я пытаюсь создать mixin, который динамически определяет переменные в LESS CSS, фактически присваивая им составное имя.
Упрощенный вариант использования (а не реальный):
.define(@var){
@foo{var}: 0;
}
Тогда можно было бы назвать mixin как таковой:
.define('Bar'){
@fooBar: 0;
}
Поскольку такой тип интерполяции строк возможен при использовании имен селекторов, мне было интересно, возможно ли такое же, что и для имен переменных; до сих пор мне не повезло с различными синтаксисами, которые я пробовал (кроме вышеперечисленного, я попытался экранировать, процитировать, используя префикс ~
и т.д.).
Изменить
Я просто попробовал еще одну вещь, и я чувствую, что могу быть рядом; но я испытываю странность синтаксиса LESS. Если я напишу это:
.define(@var){
#namespace {
@foo: @var;
}
}
И затем назовите его так:
.define(0)
Затем я могу использовать @foo
в обычном пространстве имен:
.test {
#namespace;
property: @foo; /* returns 0 */
}
Однако то же самое не применяется в случае селектора с интерполяцией строк:
.define(@var, @ns){
#@{ns} {
@foo: @var;
}
}
.define(0, namespace);
.test {
#namespace;
property: @foo;
}
Приведенный выше код дает мне следующую ошибку:
Ошибка имени: #namespace undefined
Однако интерполяция строк была успешной и действительной. На самом деле, если я заберу часть .test
и изменю приведенное выше, чтобы вывести тестовое свойство, я вижу, что CSS правильно разбирается. Я имею в виду:
.define(@var, @ns){
#@{ns} {
@foo: @var;
prop: @foo;
}
}
.define(0, namespace);
Выводит следующий CSS:
#namespace {
prop: 0;
}