Sass @each可變插值

Question

在我最新的網站中，我正在努力使用Sass功能來使我的生活更輕鬆。

我正在寫一些簡單的錯誤框樣式，並認爲使用每個會簡化他們一點。

我有以下幾點：

$消息框類型：錯誤成功正常

@each $type in $message-box-types 
    %#{$type}-box 
    @extend %message-box 
    border-color: $message-#{$type} 
    color: $message-#{$type} 
    background-color: lighten($message-#{$type}, 20%) 

的錯誤識別與$消息兩條線 - ＃{$類型}

我與之前的@each聲明類似的問題，我試圖編寫，但最終忽略了它，並從頭開始編寫它，因爲我認爲這是Sass無法處理的。

任何人有任何想法？

尼爾

Answer 1

隨着Maptastic Maple（V3.3），你可以在這裏使用了一些簡單的地圖功能

$message-box-types: 
    foo #ccc, 
    bar #ddd 

@each $type, $color in $message-box-types 
    %#{$type}-box 
    @extend %message-box 
    border-color: $color 
    color: $color 
    background-color: lighten($color, 20%)