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

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - .htaccess mod_rewrite for dynamic url which has domain names -

Website Login Issue developed in magento -