¿Es posible usar nombres de variables dinámicamente en SASS cada ciclo?

Question

Este es un ejemplo simplificado. Lo que me gustaría hacer es usar los elementos en la matriz para dar salida a los valores de las variables que he creado previamente. La siguiente sintaxis que intenta crear una variable concatenando un '$' es obviamente incorrecta, pero la estoy usando para dejar en claro lo que estoy tratando de hacer.

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

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

salida deseada:

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

Answer 1

Eso es algo que yo quería en SASS también, pero después de leer su lista de discusión, llegué a la conclusión de que este tipo de interpolación de variables no se admite todavía.

No intenté Menos, pero su documentation sugiere que sería posible con @@ sintaxis.

Answer 2

La alternativa es pasar un mapa en lugar de una lista de elementos para la directiva @each. Lo siguiente funcionará:

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