Можно ли динамически использовать имена переменных в SASS в каждом цикле?

Это упрощенный пример. То, что я хотел бы сделать, - использовать элементы в массиве для вывода значений переменных, которые я ранее создал. Синтаксис ниже, который пытается создать переменную путем конкатенации "$", явно ошибочен, но я использую его, чтобы понять, что я пытаюсь сделать.

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

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

Требуемый вывод:

.puma-title {
   width: 100px;
}
.slug-title {
   width: 200px;
}

Ответы

Ответ 1

Это то, что я хотел в SASS, но, прочитав их список обсуждений, я пришел к выводу, что такая переменная-интерполяция еще не поддерживается.

Я не пробовал Less, но их документация предполагает, что это возможно с синтаксисом @@.

Ответ 2

Альтернативой является передача карты вместо списка элементов для директивы @each. Будет работать следующее:

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