如何在Sass中的颜色映射中设置线性渐变

Question

我正在尝试在离子2项目中的颜色贴图中设置线性渐变，但只是一直出错。

$color (
  light:    #fefefe,
  dark:     #333,
  cool:     linear-gradient('#0005de', '#12dfff')
)

如何设置线性渐变

Answer 1

地图的设置应该看起来像这样：

$color: (
  light: #444,
  dark: #111,
  cool: linear-gradient(#0005de, #12dfff)
);

注意：如果要更改线性渐变的旋转，则应使用类似linear-gradient(45deg, #0005de, #12dfff)的语法。此外，＃111比＃444更暗。

要将颜色用作属性值，您必须使用map-get函数，如下所示：

.selector {
  background: map-get($color, cool);
}