是否可以在 SASS [语法] 中跨多行中断属性声明?

Question

我最近才开始使用 SASS 而不是 CSS。我正在尝试使用多个径向渐变作为我的网页背景。我不知道如何将代码转换为 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)

我感到困惑的原因是，每行末尾的逗号似乎破坏了我的代码，所以我不能有多个径向渐变。我知道这是一个非常基本的问题，但不幸的是我无法找到答案。正确的语法是什么？

Answer 1

使用 Sass 语法，不能跨多行拆分声明。这应该有效，所有内容都在一行上：

div
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)

您可以考虑改用 SCSS 语法，它确实允许多行，更像是常规 CSS。

Answer 2

是的，你可以：

$layer1: radial-gradient(ellipse at top right, rgb(175,140,175), transparent)
$layer2: radial-gradient(ellipse at bottom left, rgb(140,140,175), transparent)
$layer3: radial-gradient(ellipse at top left, rgb(175,140,175), transparent)
$layer4: radial-gradient(ellipse at bottom right, rgb(140,140,175), transparent)
background: $layer1, $layer2, $layer3, $layer4