css - SASS/SCSS object key value loop -


this question has answer here:

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

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -