How to output a map color name in sass? -


i have map using following structure:

$palette: (    scarlet: (     base: $scarlet,     light: lighten($scarlet, $tone-level),     dark: darken($scarlet, $tone-level),     trans: transparentize($scarlet, $trans-level)   ),    emerald: (     base: $emerald,     light: lighten($emerald, $tone-level),     dark: darken($emerald, $tone-level),     trans: transparentize($emerald, $trans-level)   ), )    @each $color-key, $color-variants in $unicorn-palette {     $base-color-value: map-get($color-variants, 'base');  $light: map-get($color-variants, 'light'); $dark: map-get($color-variants, 'light'); $trans: map-get($color-variants, 'trans'); 

i want able access colour values through following logic , printing key name hex value before , after:

&.#{$color-key} {       background-color: $base-color-value;        &:before { content: "#{$color-key}"; }       &:after { content: "#{$base-color-value}"; }        &--light {       background-color: $light;         &:before { content: "#{$color-key}"}         &:after { content: "#{$light}"; }       }        &--dark {       background-color: $dark;       &:after { content: "#{$dark}"; }       }        &--trans {       background-color: $trans;       }        }     } } 

so styles follows emerald--light working. can access hex , colour value of "base" not variations want print inside container alongside hex value colour. have been trying, $colour-key picks first base colour , not "light" tint in map. prints correct light hex value wrong colour name.

      background-color: $light;         &:before { content: "#{$color-key}"}         &:after { content: "#{$light}"; }       } 

how can emerald-light display hex , emerald-light corresponding name next it?


Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -