element-ui element-variables.scss文件，button背景颜色如何改成渐变色

Question

通过element-variables.scss来改变button的背景颜色变量，设置为渐变色后，_button.scss文件下的mixins就报错了:

@mixin button-variant($color, $background-color, $border-color) {
  color: $color;
  background-color: $background-color;
  border-color: $border-color;

  &:hover,
  &:focus {
    background: mix($--color-white, $background-color, $--button-hover-tint-percent);
    border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);
    color: $color;
  }
}

mix($--color-white, $background-color, $--button-hover-tint-percent)不支持渐变，重写button-variant也不起作用

Answer 1

不是@mixin出错了，是mix的用法错了：mix($color-1, $color-2, $weight)

sass 中的 mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色，并不是生成渐变色。

如果要设置渐变色，请使用 css 的 background-image 属性的 linear-gradient 函数。