Question

我希望能够将我的标签，幻想，真实感和神秘性定义为颜色：

StringBuilder

然后让它产生如下代码：

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)

有帮助吗？

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

手写笔仅更改1个数组即可创建多种样式

1 个答案: