CODEWITHSUNDEEP
cssmixinsstylus
sayam
sayam

Reputation: 163

Stylus mixins block

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

Upvotes: 4

Views: 1889

Answers (1)

kizu
kizu

Reputation: 43242

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

Upvotes: 4

Related Questions