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
Post a Comment