SCSS中的后台转换不起作用

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

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

任何想法？非常感谢！

来源

2016-11-14 Ngan Vu

请加工作演示.... –

如果你想转换渐变，那是不可能的。还有一个涉及“不透明”的选择。你可以看看。 – Ricky

@Ricky_Ruiz虽然你可以转换位置 – vals

变化$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

来源

2016-11-14 05:10:15 jonogilmour

SCSS中的后台转换不起作用

回答

相关问题