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中的後臺轉換不起作用

回答

相關問題