Получение значения из интерполяции и конкатенации переменных - PullRequest
0 голосов
/ 21 июня 2020

У меня есть большое количество определенных цветов, и каждый цвет имеет соответствующий цвет переднего плана (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);
}
...