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

我现在使用的是mix。

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），并设置为最后一种颜色（colorDash /＃000））color。

输出

.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对象的颜色应用的任何属性使用非块mixin，如果您还需要其他内容，则可以使用块mixin表示法：

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

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

手写笔mixins阻止

1 个答案: