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