एस.ए.एस.एस./एससीएसएस आपत्ति कुंजी मान पाश

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

सास वर्तमान में मैपिंग का समर्थन नहीं करता। आपको अब सूचियों की सूचियों के साथ रहना होगा।

$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/03/07 को जारी) अब आप नक्शे उपयोग करने के लिए अनुमति देता है:

@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; 
    } 
    } 
}