У меня есть большое количество определенных цветов, и каждый цвет имеет соответствующий цвет переднего плана (fg). Эти цвета меняются в зависимости от темы. Все они используют соглашение об именах:
@some-exciting-color-name: #333;
@some-exciting-color-name-fg: #fff;
У меня есть одна ситуация, когда я хочу добавить границу, если элемент отображается на другом элементе, каждый с аналогичным цветом фона.
Это мое МЕНЬШЕ:
@bar: #fff;
@bar-fg: #333;
.foo {
background-color: @@name;
color: ~"@{@{name}-fg}";
border-color: contrast(@@name, ~"@{@{name}-fg}", @@name);
}
Это фактический результат:
функция оценки ошибок contrast
: b.luma не является функцией
Это ожидаемый результат:
.foo {
background-color: #fff;
color: #333;
border-color: #333;
}
Я сузил его до того места, где кажется, что это проблема с использованием интерполяции / конкатенации в функции Contrast (). Например, это МЕНЬШЕ:
@name: 'bar';
@bar: #fff;
@bar-fg: #333;
.foo {
background-color: @@name;
color: ~"@{@{name}-fg}";
border-color: contrast(~"@{@{name}-fg}");
//border-color: contrast(@@name, ~"@{@{name}-fg}", @@name);
}
Производит это CSS, и похоже, что он изо всех сил пытается обработать то, что передается контрасту ()
.foo {
background-color: #fff;
color: #333;
border-color: contrast(#333);
}