Search code examples
csshashlookupstylusfor-in-loop

Stylus Lookup for hash name

Is there a way to use Stylus lookup function for applying hashes inside for-in loop?

$badge-photo-S   = {
  size: 36px
  font-size: 16px
} 
$badge-photo-XS  = {
  size: 32px
  font-size: 13px
}
.s-badge
  &-photo
    for each in S XS
      &--{each}
        {lookup('$badge-photo-'+each)}

It should yields to:

.s-badge-photo--S {
  width: 36px
  height: 36px;
  font-size: 16px;
} 

.s-badge-photo--XS {
  width: 32px
  height: 32px;
  font-size: 13px;
}

But it provides an empty output.

Solution

  • You need to save the result of lookup to a variable and then use it inside {}:

    $badge-photo-S   = {
  size: 36px
  font-size: 16px
} 
$badge-photo-XS  = {
  size: 32px
  font-size: 13px
}
.s-badge
  &-photo
    for each in S XS
      &--{each}
        hash = lookup('$badge-photo-'+each)
        {hash}