SCSS 中的背景过渡不起作用答案

【问题标题】：Background transition in SCSS doesn't workSCSS 中的背景过渡不起作用
【发布时间】：2017-03-27 16:39:26
【问题描述】：

我正在尝试在我的 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;
}

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

【问题讨论】：

请添加工作演示......
如果您希望过渡渐变，这是不可能的。还有一个涉及opacity 的替代方案。你可以查一下。
@Ricky_Ruiz 不过你可以转换位置

标签： css sass css-transitions

【解决方案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 中参数周围的额外括号

【讨论】：