Динамические имена переменных в LESS CSS

Я пробовал это некоторое время, глядя на другие ответы, но безрезультатно. Надеюсь, кто-то может мне помочь.

Я пытаюсь создать имена динамических переменных внутри mixin.

Переменные уже определены:

@horizontal-default-color: #fff;
@horizontal-inverse-color: #000;

и т.д..

Смешивание, которое я хочу, будет примерно таким:

.horizontal-variant(@variant) {
    color: @{[email protected]{@variant}-color}
}

И результат, который я ожидаю, при вызове:

.horizontal-default{
   .horizontal-variant(~"default");
}
.horizontal-inverse{
   .horizontal-variant(~"inverse");
}

является

.horizontal-default {color: #fff}
.horizontal-inverse {color: #000}

К сожалению, я каждый раз сталкиваюсь с ошибками.

Я знаю, что это можно сделать, я видел, что он используется в Font Awesome LESS, где @{fa-css-prefix} определяется в переменных. У меня просто возникают проблемы с переносом одного и того же решения в моем проекте.

Вы можете попробовать проверить код http://lesstester.com/

Ответ 1