css – 离子2中的背景颜色渐变

我正在尝试使用variables.scss文件中的$background-color变量为我的应用设置背景颜色.只设置一种颜色(如#000或#fff)时这样可以正常工作,但不能使其适用于渐变.

$background-color:线性渐变(到底部,#000 0%,#fff 100%);

代码抛出以下Sass错误

‘rgba($color,$alpha)’的参数’$color’必须是一种颜色Backtrace.

那么,如何将背景颜色设置为渐变?

解决方法

这是我用于自己的背景渐变的scss代码.
$SIDEMENU_TOP: #A23C4B;
$SIDEMENU_BottOM: #ff9068;
$SIDEMENU_TRANSPARENCY: rgba(255,255,0.4);


.side-menu-gradient{
    background: -webkit-gradient(left top,$SIDEMENU_TOP,$SIDEMENU_BottOM);
    background: -o-linear-gradient(bottom right,$SIDEMENU_BottOM);
    background: -moz-linear-gradient(bottom right,$SIDEMENU_BottOM);
    background: linear-gradient(to bottom right,$SIDEMENU_BottOM);
}

(也许来自Ionic Creator – Creating beautiful Sidemenus(YouTube)的高度启发

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效