LessCSS: argb() не работает с переменной с динамическим именем

Question

Я создал mixin, который использует метод argb() (для градиента фильтра IE). Этот mixin принимает параметр, используемый для установки имени хорошей переменной для выбора среди список переменных. Эти переменные хранят цвета гекса.

@var_foo: #FFFFFF; 
@var_bar: #000000; 

.setColor(@colorName){ 
    @colorVar: ~'@{var_@{colorName}}'; 
    @colorArgb: argb(@colorVar); 
} 

Эта причина меня ошибка: ошибка оценки функции argb: Объект # не имеет метод «toARGB»

Кажется, он не любит функции побега. Когда я заменяю @colorVar прямо на hardcoded @var_foo, он работает. Я делаю что-то неправильно, или метод argb() нуждается в чем-то особенном?

Спасибо

Answer 1

Вы вызываете сконструированное имя переменного ошибочно.

Вы должны использовать @@, чтобы позвонить по номеру variable from a variable name.

МИНУС:

@var_foo: #FFFFFF; 
@var_bar: #000000; 

.setColor(@colorName) { 
    @colorVar: 'var_@{colorName}'; 
    @colorArgb: argb(@@colorVar); 
    color: @colorArgb; 
} 

.setColor(bar); 

возвратит этот CSS:

color: #ff000000; 

Answer 2

Я согласен с ответом Мартина, насколько это идет, но мне кажется, что вы хотите две переменные набор с цветовыми свойствами, и его решение оставляет основную цветовую переменную в виде строки. Поэтому я рекомендую установить исходную переменную getter, чтобы затем использовать для установки двух цветовых переменных. Вот пример (не зная, как вы используете цвета, я просто собираю что-то вместе здесь), маловероятно, что вы будете использовать формат файла IE для background-color, но вы получите идею):

МЕНЬШЕ

@var_foo: #FFFFFF; 
@var_bar: #000000; 

.setColor(@colorName) { 
    @getColor: 'var_@{colorName}'; 
    @colorVar: @@getColor; 
    @colorArgb: argb(@@getColor); 
} 

.test { 
    .setColor(foo); 
    color: @colorVar; 
    background-color: @colorArgb; 
} 

.test2 { 
    .setColor(bar); 
    color: @colorVar; 
    background-color: @colorArgb; 
} 

CSS Выходной

.test { 
    color: #ffffff; 
    background-color: #ffffffff; 
} 
.test2 { 
    color: #000000; 
    background-color: #ff000000; 
}