css - SASS/SCSS object key value loop -
this question has answer here:
- associative array scss/sass 1 answer
take @ example:
@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"; } }
i want make things dry possible want know if following possible, , if how?
@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; } } }
sass not support mappings. you'll have live lists of lists now.
$icons: star "\2605", lightning "\26a1"; @each $icon in $icons { $key: nth($icon, 1); $value: nth($icon, 2); .icon-#{$key} { @extend .icon; &:after { content: $value; } } }
Comments
Post a Comment