Question

我正在尝试在我的SCSS文件中使用转换，但它似乎不起作用。我知道有时候不支持渐变，所以我制作了“bg-gradienter”来创建背景并希望将它用于过渡。但是，此代码仍然无效。我还添加width: 50%;作为调试器;过渡在宽度上很有效。

&::after {
  @include bg-gradienter (( to bottom left, rgba(6, 55, 105, 0.25) 25%, rgba(8, 57, 106, 1) 100%));
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content:"";
  position: absolute;
  transition: all 2s ease-in-out;
}
&:hover:after {
  width: 50%;
  @include bg-gradienter (( to bottom left, rgba(6, 55, 105, 0.75) 25%, rgba(8, 57, 106, 1) 100%));
  transition: all 2s ease-in-out;
}

这是我的bg-gradienter：

@mixin bg-gradienter($args) {
  background: -moz-linear-gradient($args), no-repeat;
  background: -webkit-linear-gradient($args), no-repeat;
  background: -o-linear-gradient($args), no-repeat;
  background: -ms-linear-gradient($args), no-repeat;
  background: linear-gradient($args), no-repeat;
}

有什么想法吗？非常感谢！

Answer 1

将$args更改为$args...，这样您就可以在bg-gradienter的参数中加入逗号：

@mixin bg-gradienter($args...) {
  background: -moz-linear-gradient($args), no-repeat;
  background: -webkit-linear-gradient($args), no-repeat;
  background: -o-linear-gradient($args), no-repeat;
  background: -ms-linear-gradient($args), no-repeat;
  background: linear-gradient($args), no-repeat;
}

并删除@include

中参数周围的额外括号

SCSS中的后台过渡不起作用

1 个答案: