sass - functions - Actualizando las variables creadas por las funciones aligerar/oscurecer al modificar el color base original después

sass color functions

Question

Actualmente estoy intentando crear una mezcla que me permita crear botones con valores de desplazamiento usando las funciones oscurecer y aclarar colores en sass. Por alguna razón, mi código está escupiendo blanco y negro para el color de fondo en lugar del valor hexadecimal de un color devuelto. Aquí está en el lápiz de códigos: http://codepen.io/malikabee/pen/vEQZOv

$btn_color: #fff;
$btn_alpha: 1;
$btn_color_amount: 100%;

$color_funcs: (
  ''darken'': darken($btn_color, $btn_color_amount), 
  ''lighten'': lighten($btn_color, $btn_color_amount),
  ''transparentize'': transparentize($btn_color, $btn_alpha)
);

@mixin _btn_color($base_color, $amount, $hover){
  background: $base_color;
  a:hover,
  a:focus{
    @each $func_name, $color_func in $color_funcs{
      @if($func_name == $hover){
         $btn_color: $base_color;
         $btn_color_amount: $amount;
         background-color: $color_func;
      }
    }
  }
}

 .btn{
   display: inline-block;
   vertical-align: bottom;
   text-align: center;
   border-radius: 10px;
   text-decoration: none;
 }

.btn_blue{
  @include _btn_color(#3c3c3c, 10%, ''darken'');
}

Answer 1

Una vez que pasas este bloque de código, las expresiones ya no existen, solo el valor que evaluaron hace:

$color_funcs: (
  ''darken'': darken($btn_color, $btn_color_amount), 
  ''lighten'': lighten($btn_color, $btn_color_amount),
  ''transparentize'': transparentize($btn_color, $btn_alpha)
);

Cambiar $btn_color después de este punto no hace nada. Sass no puede retroceder en el tiempo y volver a ejecutar esas expresiones porque ya han sido evaluadas utilizando el color original (negro).

Lo que puedes hacer es usar la función de call .

@mixin _btn_color($base_color, $amount, $func){
  background: $base_color;
  a:hover,
  a:focus{
    background-color: call($func, $base_color, $amount);
  }
}

.btn_blue{
  @include _btn_color(blue, 10%, ''darken'');
  color: white;
}