如何使用SCSS变量创建线性渐变？现有写法不生效是什么原因？

• linear-gradient() 语法使用错误：to 关键字仅用于指定渐变方向（例如 to right、to bottom right），多个色标之间不需要加 to，直接用逗号分隔即可。
• 属性适配错误：background-color 仅支持纯色值，线性渐变属于CSS图像类型，需要赋值给 background 或者 background-image 属性才能生效。

首先修改SCSS变量定义，如果你不需要指定特殊方向，默认从上到下渐变的写法如下：

$colour__social--ig: linear-gradient(#fdc468, #ee867c, #df4996);

如果需要自定义渐变方向，可以在色标前加方向参数，示例如下：

// 示例：从左到右的Instagram风格渐变
$colour__social--ig: linear-gradient(to right, #fdc468, #ee867c, #df4996);

最后修改样式赋值代码：

.wrapper {
  background: $colour__social--ig;
  // 也可以写为 background-image: $colour__social--ig; 效果完全一致
}

内容的提问来源于stack exchange，提问作者Will