手写笔 mixins 块

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

会输出到

.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;
}

我现在拥有的 mixin，使用 block。

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 设置为background 和border-color 的第一种颜色（colorHome / #FFF），并设置为color 的最后一种颜色（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;
}

考虑到块混合是相对较新的，它们可以用来实现我想要的吗？还是我应该考虑使用完全不同的解决方案？

谢谢

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

我们正在考虑添加一种方法来像哈希一样修改传递的块，但我们还没有到这里 :)