12

This is a simplified example. What I'd like to do is use the items in the array to output variable values I've previously created. The syntax below that tries create a variable by concatenating a '$' is obviously wrong but I'm using it to make it clear what I'm trying to do. 

$puma-width: 100px;
$slug-width: 200px;

@each $animal in puma, slug {
  .#{$animal}-title {
    width: $+#{$animal}-width;
  }
}

Desired output:

.puma-title {
   width: 100px;
}
.slug-title {
   width: 200px;
}
Tom Genoni
  • 151
  • 7

2 Answers2

3

That's something that I wanted in SASS as well, but after reading their discussion list, I concluded that this kind of variable interpolation is not supported yet.

I didn't try Less, but their documentation suggests it would be possible with @@ syntax.

Marcelo Diniz
  • 2,493
  • 2
  • 21
  • 27
1

The alternative is to pass a map instead of item list for the @each directive. The following will work:

@each $animal, $width in (puma, 100px),
                         (slug, 200px) {
  .#{$animal}-title {
    width: #{$width};
  }
}
Milosz Falinski
  • 47
  • 5