Блог

Как может стилус смешивать интерполяцию для обеих сторон определения переменной, например:

 --MyVariable: MyVariable
 

В скомпилированном CSS --MyVariable должно оставаться имя переменной, тогда как вторая переменная должна быть числовым значением, вычисленным для этой переменной, определенной в другом месте.

У меня будет много таких пар переменной CSS и переменной стилуса. Теперь, хотя я мог бы просто вручную записать их в файл стилуса, я хотел бы иметь Миксин, который позволяет мне создавать их, записывая общую часть имен только один раз в качестве единственного аргумента Миксина, например:

 VariablePair(MyVariable-1) // --MyVariable-1: MyVariable-1
VariablePair(MyVariable-2) // --MyVariable-2: MyVariable-2
VariablePair(MyVariable-3) // --MyVariable-3: MyVariable-3
 

Я пытался:

 VariablePair(VariableName)
  --{VariableName}: VariableName

VariablePair(MyVariable)
 

Он не разбирался.

Я понял, что MyVariable » без '' » станет реальной ценностью, к которой нельзя будет привязать -- . Но добавление '' к нему as VariablePair('MyVariable') приведет к тому, что правая часть самого определения станет строкой вместо переменной стилуса для вычисления.

Я пробовал различные комбинации наличия/отсутствия скобок и '' и $ , а также конкатенаций, но ни одна из них, похоже, не работает. '--' VariableName ': ' VariableName (с/без скобок/ $ ) не работает, он либо не анализирует, либо анализирует, но без создания строки в скомпилированном CSS.

Есть ли решение этой проблемы?

unquote работает для этого:

 VariablePair(name, val)
  {unquote('--'   name)}: val

.selector
  VariablePair('fontcolor', red)
  color: var(--fontcolor)
 

выведет

 .selector {
  --fontcolor: #f00;
  color: var(--fontcolor);
}