Блог

Главная - Вопросы по программированию - Может ли стилус интерполировать значение свойства, а не имя свойства?

Может ли стилус интерполировать значение свойства, а не имя свойства?

#css #mixins #stylus

Вопрос:

Я пытаюсь стилизовать .tag с помощью микширования и интерполяции в стилусе. Я хотел бы, чтобы Миксин был взят tagName в качестве переменной и передал ее значениям определенных атрибутов, чтобы генерировать переменные для значений, определенных в другом месте.

Предположим , у меня есть файл стилуса, который определяет переменные цвета для разных .tag , например color-TODO = red . Затем, чтобы получить CSS, подобный:

 .tag-TODO
  color: red                // from color-TODO
  background: blue          // from color-TODO-background
  box-shadow: 0 0 4px green // from color-TODO-shadow

, Я бы хотел сделать еще один файл стилуса с таким миксом, как этот:

 tag(tagName)
  .tag-{tagName}                                // for .tag-TODO
    color: color-{tagName}                      // for color-TODO
    background: color-{tagName}-background      // for color-TODO-background
    box-shadow: 0 0 4px color-{tagName}-shadow  // for color-TODO-shadow

tag(TODO)                                       // to generate the selector with the properties

Это не работает, по-видимому, потому {} , что после идентификатор свойства интерпретируется буквально, а не интерполируется как переменная Mixin.

Интересно, есть ли обходной путь? Есть ли способ (в стилусе) для Миксина (или другой конструкции) генерировать разные имена переменных, использующие одну и ту же строку в качестве разных значений свойств?

Ответ №1:

С convert() помощью встроенной функции (см. https://stylus-lang.com/docs/bifs.html), вы можете сделать это :

 // your variables
color-TODO = #000
color-TODO-background = #666
color-TODO-shadow = #f2f2f2

// your mixin
tag(tagName)
  .tag-{tagName}
    color: convert("color-"   tagName)
    background: convert("color-"   tagName   "-background")      // for color-TODO- background
    box-shadow: 0 0 4px convert("color-"   tagName   "-shadow")  // for color-TODO-shadow

// execution
tag(TODO)

дает css :

 .tag-TODO {
  color: #000;
  background: #666;
  box-shadow: 0 0 4px #f2f2f2;
}
Метки: ,