SASS/SCSS對象鍵值環

Question

看看這個例子：

@include font-face('Entypo', font-files('entypo.woff')); 

.icon { 
    display: inline; 
    font: 400 40px/40px Entypo; 
} 

.icon-star { 
    @extend .icon; 

    &:after { 
    content: "\2605"; 
    } 
} 

.icon-lightning { 
    @extend .icon; 

    &:after { 
    content: "\26A1"; 
    } 
} 

我希望讓事情儘可能的乾燥，所以我想知道如果下面是可能的，如果是的話怎麼辦？

@include font-face('Entypo', font-files('entypo.woff')); 

.icon { 
    display: inline; 
    font: 400 40px/40px Entypo; 
} 

$icons { 
    $star: "\2605"; 
    $lightning: "\26A1"; 
} 

@each $icon in $icons { 
    $key = $icon{key}; // ??? 
    $value = $icon{value}; // ??? 

    .icon-#{$key} { 
    @extend .icon; 

    &:after { 
     content: $value; 
    } 
    } 
} 

Answer 1

Sass目前不支持映射。你必須用列表的列表來住了。

$icons: star "\2605", lightning "\26A1"; 

@each $icon in $icons { 
    $key: nth($icon, 1); 
    $value: nth($icon, 2); 

    .icon-#{$key} { 
    @extend .icon; 

    &:after { 
     content: $value; 
    } 
    } 
} 

Answer 2

薩斯3.3（發佈於2014年3月7日），現在允許你使用地圖：爲什麼我無法找到一個簡單的循環這樣

@include font-face('Entypo', font-files('entypo.woff')); 

.icon { 
    display: inline; 
    font: 400 40px/40px Entypo; 
} 

$icons: (
    star: "\2605", 
    lightning: "\26A1" 
); 

@each $key, $value in $icons { 
    .icon-#{$key} { 
    @extend .icon; 

    &:after { 
     content: $value; 
    } 
    } 
}