SASS'de her döngüde değişken isimleri dinamik olarak kullanmak mümkün mü?

Question

Bu basitleştirilmiş bir örnektir. Yapmak istediğim, daha önce oluşturduğum değişken değerleri vermek için dizideki öğeleri kullanmak. Bir '$' değerini birleştirerek bir değişken oluşturmaya çalışan aşağıdaki sözdizimi açıkçası yanlıştır, ancak yapmaya çalıştığım şeyi netleştirmek için kullanıyorum.

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

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

İstenilen çıktı:

Ben de SUKDÖ'nün istediğim ama onların tartışma listesini okuduktan sonra, ben değişken enterpolasyon bu tür henüz desteklenmiyor sonucuna şey

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

Answer 1

.

Daha az denemedim, ancak documentation, @@ sözdizimi ile mümkün olabileceğini gösteriyor.

Answer 2

Alternatif, @each yönergesi için öğe listesi yerine bir haritayı geçirmektir. Aşağıdakiler çalışacaktır:

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