sass - How to reference variables in a map, before the whole map is defined? -
i’ll start code, should easier understand want do:
@function get-color($color, $lightness) { @return map-get(map-get($colors, $color), $lightness); } $colors: ( green: ( light: #a4ede1, mid: darken(get-color(green, light), 20%), dark: darken(get-color(green, mid), 20%) ), red: ( light: complement(get-color(green, light)), mid: complement(get-color(green, mid)), dark: complement(get-color(green, dark)) ) );
as can see, have created multidimensional map, color values.
@ moment, want create other colors, through darken()
, complement()
functions. problem is, need reference variables inside of $colors
variable, before filled. results in error get-color()
function, tells me, there no $colors
variable.
i know possible alter colors outside of $colors
map, benefit of doing way is, can come , define color values, not generated. huge benefit in maintaining project.
so here question: there way reference variable in map, before whole map defined?
no. mapping isn't defined until reach semicolon @ end. cannot reference portion of until then.
$base-color: #a4ede1; $colors: ( green: ( light: $base-color, mid: darken($base-color, 20%), dark: darken($base-color, 40%) ), ); $colors: map-merge($colors, ( red: ( light: complement(get-color(green, light)), mid: complement(get-color(green, mid)), dark: complement(get-color(green, dark)) ))); .foo { color: get-color(red, mid); }
unless you're looping on mapping, recommend not using mappings store color variables. rather, better write function manipulation you:
$base-color: #a4ede1; @function get-color($lightness, $variation: null, $color: $base-color) { $color: if($variation, call($variation, $color), $color); @if $lightness == medium { @return darken($color, 20%); } @else if $lightness == dark { @return darken($color, 40%); } @return $color; } .foo { color: get-color(mid); border: 1px solid get-color(mid, complement); }
Comments
Post a Comment