Sass @each với nhiều biến số

Question

Tôi mới bắt đầu với Sass và Compass, và tôi rất thích nó. Điều tôi muốn làm là tận dụng chức năng @each để đơn giản hóa các tác vụ lặp đi lặp lại. Tuy nhiên, tôi chỉ thấy các ví dụ về số @each chèn một biến và tôi muốn có thể sử dụng nhiều biến.

Cách chuẩn (từ Sass Reference):

@each $animal in puma, sea-slug, egret, salamander { 
    .#{$animal}-icon { 
    background-image: url('/images/#{$animal}.png'); 
    } 
} 

Mà là tuyệt vời, nhưng tôi muốn để có thể làm điều gì đó như:

@each {$animal $color} in {puma black}, {sea-slug green}, {egret brown}, {salamander red} { 
    .#{$animal}-icon { 
    background-color: #{$color}; 
    } 
} 

Đây có phải là có thể?

Answer 1

Tôi đang ở cùng một thuyền (người mới bắt đầu với Sass/Compass) và phải làm một việc tương tự. Dưới đây là những gì tôi đã đưa ra, sử dụng danh sách lồng nhau:

$flash_types: (success #d4ffd4) (error #ffd5d1); 

@each $flash_def in $flash_types { 
    $type: nth($flash_def, 1); 
    $colour: nth($flash_def, 2); 

    &.#{$type} { 
     background-color: $colour; 
     background-image: url(../images/#{$type}.png); 
    } 
} 

Đây không phải là giải pháp thanh lịch nhất nhưng nó sẽ hoạt động nếu bạn không thể tìm thấy bất kỳ thứ gì khác. Hy vọng nó giúp! Tôi cũng đánh giá cao một phương pháp tốt hơn :)

Answer 2

Chỉ cần bắt gặp điều này, có câu trả lời cho bạn. Trong Sass, bạn thực sự có thể có một danh sách đa chiều, nên thay vì xây dựng các biến riêng lẻ, bạn muốn tạo ra một biến để giữ tất cả, sau đó vòng qua chúng:

$zoo: puma black, sea-slug green, egret brown, salamander red; 

@each $animal in $zoo { 
    .#{nth($animal, 1)}-icon { 
    background-color: nth($animal, 2); 
    } 
} 

Bạn có thể có danh sách đa chiều giống như bạn làm có các danh sách chiều đơn miễn là mỗi thứ nguyên lồng nhau được phân tách theo cách khác (trong trường hợp của chúng tôi, dấu phẩy và dấu cách).

CẬP NHẬT 24 tháng 10 năm 2013

Trong Sass 3.3, có một kiểu dữ liệu mới gọi là các bản đồ về mà là một tập hợp băm mặt hàng. Với điều này, chúng ta có thể viết lại câu trả lời trước của tôi theo cách sau để nhiều chặt chẽ hơn giống với kết quả mong muốn:

$zoo: ("puma": black, "sea-slug": green, "egret": brown, "salamander": red); 

@each $animal, $color in $zoo { 
    .#{$animal}-icon { 
     background-color: $color; 
    } 
} 

Bạn có thể thấy điều này trong hành động qua tại SassMeister

Answer 3

Một cách khác tôi đã sử dụng nếu có ai cần nó :

$i:0; 
@each $name in facebook, twitter, google_plus, instagram, youtube, pinterest { 
    $i:$i+1; 
} 

Answer 4

Chức năng này được hỗ trợ cho Sass 3.3.0 trở lên (Tôi vừa cập nhật từ 3.2.14 đến 3.4.4 để sử dụng).

@each $animal, $color in (puma, black), (sea-slug, green), (egret, brown), (salamander, red) { 
    .#{$animal}-icon { 
    background-color: $color; 
    } 
} 

Tôi muốn giới thiệu cho check the changelog cho tính không tương thích ngược, nếu bạn đang cập nhật Sass.

Sass reference for multiple assignments with @each

Answer 5

Một giải pháp khác có thể là tạo danh sách khác và "nén" chúng.

//Create lists 
$animals: puma, sea-slug, egret, salamander; 
$animals-color: black, green, brown, red; 

//Zip lists 
$zoo: zip($animals, $animals-color); 

//Do cycle 
@each $animal, $color in $zoo { 
    .#{$animal}-icon { 
     background-color: $color; 
    } 
} 

Có lẽ giải pháp này phức tạp hơn so với các giải pháp khác, nhưng nếu bạn sử dụng danh sách nhiều lần, bạn có thể tiết kiệm thời gian. (là trường hợp của tôi)