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;
}

通过以后修改原始基色来更新通过淡化/变暗功能创建的变量

1 个答案: