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

Question

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

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

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

Желаемый результат:

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

Answer 1

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

Я не пробовал Меньше, но их documentation предлагает это с помощью синтаксиса @@.

Answer 2

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

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