Stylus 创建多种样式，同时仅更改 1 个数组

Question

我希望能够将我的标签、幻想、现实主义和神秘定义为颜色：

tagsHash = {
   fantasy: #4286f4,
   realism: #779954,
   mystery: #91184a
}

#container
   createTags(tagsHash)

然后让它生成如下代码：

#container
  &[data-tag='fantasy']
    applyStyles(fantasy)
  &[data-tag='realism']
    applyStyles(realism)
  &[data-tag='mystery']
    applyStyles(mystery)

  // combination styles
  &[data-tag='fantasy'][data-tag='realism']
    applyStyles(blend(fantasy, realism))
  &[data-tag='realism'][data-tag='mystery']
    applyStyles(blend(realism, mystery))
  &[data-tag='mystery'][data-tag='fantasy']
    applyStyles(blend(mystery, fantasy))

我希望它能处理任意数量的任意颜色的标签。新标签会自动创建所需的选择器。这可能吗？如果不可能，我能得到的最接近它的是什么，以便添加新标签需要尽可能少的更改？

到目前为止我得到了什么：

foo = {
  fantasy: #4286f4,
  realism: #779954,
  mystery: #91184a
}

applyStyles(c)
  .name
    color c

#container
  for key, value in foo
    &[data-tag={key}]
      applyStyles(value)

效果很好。产生正是我想要的。然后我尝试生成组合。但不起作用：

#container
  for key, value in foo
    &[data-tag={key}]
      applyStyles(value)

    for key2, value2 in foo
      unless key1 === key2
        &[data-tag*={key}][data-tag*={key2}]
          applyStyles(blend(value, value2))

有什么帮助吗？

Answer 1

您可以使用以下解决方案（注意行的标识和末尾的附加信息）：

foo = {
  fantasy: #4286f4,
  realism: #779954,
  mystery: #91184a
}

createTags(tags)
  for key, value in foo
    &[data-tag=\"{key}\"]
      applyStyles(value)
      for key2, value2 in foo
        unless key == key2
          &[data-tag=\"{key2}\"]
            applyStyles(blend(rgba(value, 0.5), value2))

applyStyles(c)
  .name
    color c

#containers
  createTags(foo)

... 给出以下 CSS 输出：

#container[data-tag="fantasy"] .name {
  color: #4286f4;
}
#container[data-tag="fantasy"][data-tag="realism"] .name {
  color: #5d90a4;
}
#container[data-tag="fantasy"][data-tag="mystery"] .name {
  color: #6a4f9f;
}
#container[data-tag="realism"] .name {
  color: #779954;
}
#container[data-tag="realism"][data-tag="fantasy"] .name {
  color: #5d90a4;
}
#container[data-tag="realism"][data-tag="mystery"] .name {
  color: #84594f;
}
#container[data-tag="mystery"] .name {
  color: #91184a;
}
#container[data-tag="mystery"][data-tag="fantasy"] .name {
  color: #6a4f9f;
}
#container[data-tag="mystery"][data-tag="realism"] .name {
  color: #84594f;
}

现在您可以使用颜色向 foo 添加更多标签，并将手写笔脚本转换为 CSS。

对您提供的代码的补充说明：

blend 函数仅在第一种颜色的 alpha 值低于 1 的情况下有效。
运算符 === 无效：see this list on stylus documentation.

更多信息（针对 stylus 上的新用户）：

您可以使用 -w or --watch 选项自动重新编译 CSS 文件：

stylus -w stylus-file.styl

Stylus 创建多种样式，同时仅更改 1 个数组

Stylus create multiple styles while changing only 1 array

css

stylus

node.js