Có thể sử dụng tên biến động trong SASS mỗi vòng lặp không?

Question

Đây là một ví dụ đơn giản. Những gì tôi muốn làm là sử dụng các mục trong mảng để tạo ra các giá trị biến mà tôi đã tạo trước đó. Cú pháp bên dưới cố gắng tạo biến bằng cách ghép một '$' rõ ràng là sai nhưng tôi đang sử dụng nó để làm rõ nó đang cố gắng làm gì.

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

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

mong muốn đầu ra:

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

Answer 1

Đó là điều mà tôi muốn trong Sass là tốt, nhưng sau khi đọc danh sách thảo luận của họ, tôi kết luận rằng loại suy biến chưa được hỗ trợ.

Tôi đã không thử Ít hơn, nhưng documentation của chúng tôi gợi ý rằng có thể có cú pháp @@.

Answer 2

Cách khác là chuyển một bản đồ thay vì danh sách mục cho chỉ thị @each. Công việc sau sẽ hoạt động:

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