Czy można dynamicznie używać nazw zmiennych w SASS w każdej pętli?

Question

To jest uproszczony przykład. Chciałbym użyć elementów z tablicy do wyprowadzenia wartości zmiennych, które wcześniej utworzyłem. Składnia poniżej, która próbuje utworzyć zmienną przez konkatenację "$" jest oczywiście błędna, ale używam go, aby wyjaśnić, co próbuję zrobić.

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

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

Pożądany wyjściowa:

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

Answer 1

To coś, co chciałem w SASS, jak również, ale po przeczytaniu ich listę dyskusyjną, doszedłem do wniosku, że ten rodzaj zmiennej interpolacji nie jest jeszcze obsługiwany.

Nie próbowałem Less, ale ich documentation sugeruje, że byłoby to możliwe przy użyciu składni @@.

Answer 2

Alternatywą jest przekazanie mapy zamiast listy przedmiotów dla dyrektywy @each. Następujące funkcje będą działać:

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