是否可以在每个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}; 
    } 
}