css - Ionic 2 中的背景颜色渐变

Question

我正在尝试使用 variables.scss 文件中的 $background-color 变量为我的应用设置背景颜色。这在仅设置一种颜色(如 #000 或 #fff)时效果很好，但不能使其与渐变一起使用。

$background-color: linear-gradient(to bottom, #000 0%, #fff 100%);

此代码抛出以下 Sass 错误:

'rgba($color, $alpha)' 的参数 '$color' 必须是颜色回溯。

那么，如何将背景颜色设置为渐变色呢？

Answer 1

这是我用于我自己的背景渐变的 scss 代码。

$SIDEMENU_TOP: #A23C4B;
$SIDEMENU_BOTTOM: #ff9068;
$SIDEMENU_TRANSPARENCY: rgba(255,255,255,0.4);


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

(可能受到 Ionic Creator - Creating beautiful Sidemenus (YouTube) 的高度启发