Stylus混合块

Question

我有一组带颜色的类列表，希望在mixin中使用定义好的颜色设置不同的属性（如color、background、border-color等）。

例子

colorHome = #FFF
colorParam = #999
colorDash = #000

links = {
  'home': colorHome,
  'param': colorParam,
  'dash': colorDash
}

.dashboard-menu li
  border 1px solid
  +addLinks()
    color clr
    background clr
    border-color clr

would output to

.dashboard-menu li {
  border: 1px solid;
}
.dashboard-menu li.home {
  color: #fff;
  background: #fff;
  border-color: #fff;
}
.dashboard-menu li.param {
  color: #999;
  background: #999;
  border-color: #999;
}
.dashboard-menu li.dash {
  color: #000;
  background: #000;
  border-color: #000;
}

我现在有一个使用块的混合器。

addLinks()
  for key, value in links
    clr = value
    &.{key}
      {block}


.dashboard-menu li
  border 1px solid
    +addLinks()
      color clr
      background clr
      border-color clr

但出于某种原因，clr被设置为背景和边框颜色的第一个颜色（colorHome / #FFF），并且被设置为最后一个颜色（colorDash / #000）的文字颜色。

输出

.dashboard-menu li {
  border: 1px solid;
}
.dashboard-menu li.home {
  color: #000;
  background: #fff;
  border-color: #fff;
}
.dashboard-menu li.param {
  color: #000;
  background: #fff;
  border-color: #fff;
}
.dashboard-menu li.dash {
  color: #000;
  background: #fff;
  border-color: #fff;
}

考虑到块级mixin比较新，它们能够实现我想要的吗？还是应该考虑使用完全不同的解决方案？

谢谢。

- sayam

---

看起来对我来说不错。它不起作用吗？ - floww

如果您查看輸出，則在 .home 中背景和邊框顏色始終相同（＃FFF），而在 .param 中為＃999，在 .dash 中為＃000。我已經設置了我想要的輸出（就在示例之後）。 - sayam

Answer 1

你应该考虑使用另一种解决方案。你传递给块mixin的内容在mixin代码之前被评估，因此它总是从运行到运行都是相同的。

我不确定你想要实现什么，但这里有一个示例，展示了如何实现你尝试做的事情：

addLinks(hash)
  for key, value in links
    new_hash = clone(hash)
    for hash_key, hash_value in new_hash
      if hash_value == clr
        new_hash[hash_key] = value

    &.{key}
      {new_hash}
      {block}

.dashboard-menu li
  border 1px solid
  addLinks({
    color: clr
    background: clr
    border-color: clr
  })

您可以使用非块混合来应用您的links对象中的颜色到任何属性上，如果您需要其他内容，您可以完全使用块混合符号:

.dashboard-menu li
  border 1px solid
  +addLinks({
      color: clr
      background: clr
      border-color: clr
    })
    padding: 10px

我们正在考虑添加一种修改传递的块（block）的方式，就像哈希表一样，但我们还没有实现 :)

- kizu

---

谢谢，看起来可以工作。我想在这些颜色上添加函数：例如 darken(clr, 10)。在 stylus 中有任何替换函数吗？或者至少有一个逐个迭代字符串字符的函数吗？（例如 string[index]？） - sayam

我不确定我是否理解了你的评论。1. 你可以像往常一样在哈希中使用颜色函数：new_hash[hash_key] = darken(value, 10)，并且有一个替换函数（仅适用于标识符或字符串），尚未记录。您可以在测试中查看用例：before 和 after。 - kizu

你们计划增加一种修改传递的块类似于哈希的方式吗？这是一个非常有用的功能。 - raciasolvo

我们能将 block 解析为哈希值吗？ - raciasolvo