SASS语法中如何换行编写多径向渐变背景属性？

嘿，我完全懂你遇到的这个坑！刚转SASS的时候，很多人都会在多值属性换行时栽跟头——毕竟CSS里直接换行没问题，但SASS的解析规则不一样，它会把换行默认当成语句结束，所以你每行末尾的逗号就会导致编译出错。

给你两种靠谱的解决方法，都能完美实现你要的多径向渐变效果：

方法一：用括号包裹整个属性值（推荐） #

这是最直观也最常用的方式，把所有径向渐变的声明放在括号里，SASS就会把括号内的内容当作一个完整的属性值解析，换行和逗号都能正常生效：

background: (
  radial-gradient(ellipse at top right, rgb(175,140,175), transparent),
  radial-gradient(ellipse at bottom left, rgb(140,140,175), transparent),
  radial-gradient(ellipse at top left, rgb(175,140,175), transparent),
  radial-gradient(ellipse at bottom right, rgb(140,140,175), transparent)
);

方法二：用反斜杠标记换行未结束 #

如果你不想用括号，也可以在每行末尾加一个反斜杠\，告诉SASS这一行还没结束，下一行是属性值的延续：

background: radial-gradient(ellipse at top right, rgb(175,140,175), transparent), \
            radial-gradient(ellipse at bottom left, rgb(140,140,175), transparent), \
            radial-gradient(ellipse at top left, rgb(175,140,175), transparent), \
            radial-gradient(ellipse at bottom right, rgb(140,140,175), transparent);

简单说下原因：SASS的语法解析会把单独的换行视为属性声明的结束，所以你原来的写法里，第一行末尾的逗号会被当成background属性的结束符号，后面的行就变成了无效的CSS代码，自然会报错。用括号或者反斜杠，都是在告诉SASS：“别着急，这整个都是一个属性值！”

另外，这个括号包裹的方法适用于所有多值CSS属性，比如box-shadow、transition这些，以后在SASS里换行写多值属性都能这么用~

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