Stylus block

Question

I have a list of classes in a couple with flowers, I would like to set the various properties ( color, background, border-color...) with some flowers inside mixin.

Example

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

will be displayed on

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

I have mixing right now using the 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

But for some reason, it is clrset to the first color (colorHome / # FFF) for backgroundand border-colorand is set to the last color (colorDash / # 000) for color.

Exit

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

Given that block mixes are relatively news, can they be used to accomplish what I want? Or should I use using a completely different solution?

thanks

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

mixin , , links, - , mixin:

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

, , :)