Stylus mixins block

css, mixins, stylus

Solution

You should consider using a different solution. The contents you're passing to a block mixin is evaluated before the mixin's code, so it always would be the same from the run to run.

I'm not sure what exactly you're trying to achieve there, but here is one example of how you could do the thing you've tried:

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

You can use non-block mixin for any properties you want to apply with the color from your `links` object, and if you'd need something else, you could use the block mixin notation altogether:

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

We're thinking on adding a way to modify the passed block like a hash, but we're not here yet :)

Problem

I have a list of class paired with colors, I would like to set different properties (`color`, `background`, `border-color`, ...) with the defined colors inside a 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 ``` 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; } ``` The mixin I have right now, using 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, `clr` is set to the first color (colorHome / #FFF) for `background`, and `border-color`, and set to the last color (colorDash / #000) for the `color`. Output ``` .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; } ``` Considering block mixins are relatively news, can they be used to achieve what I want ? Or should I consider using a completely different solution ? Thanks

Original source