通过随后修改原始基色来更新 lighten/darken 函数创建的变量

Question

我目前正在尝试创建一个混合程序，让我可以使用 sass 中的变暗和变亮颜色功能构建具有悬停值的按钮。由于某种原因，我的代码为背景颜色吐出白色和黑色，而不是返回颜色的十六进制值。这是在代码笔上：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

一旦你通过了这段代码，表达式就不再存在，只有它们计算的值存在：

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

在此之后更改 $btn_color 没有任何作用。 Sass 无法回到过去并重新运行这些表达式，因为它们已经使用原始颜色（黑色）进行了计算。

您可以做的是使用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;
}

通过随后修改原始基色来更新 lighten/darken 函数创建的变量

Updating variables created by lighten/darken functions by modifying the original base color afterwards

sass