如何在SASS中声明多行变量及含渐变回退的复合变量？

Hey there! Let's break down your two Sass questions with practical, actionable examples that fit exactly what you need.

1. Declaring multi-line variables in Sass #

Sass makes working with multi-line variables totally straightforward, whether you're dealing with text strings or property values. Here are the most common approaches:

For multi-line text strings #

Wrap your content in single or double quotes, then add line breaks directly inside—Sass will preserve the structure (depending on your output format settings):

$multi-line-note: "This is a multi-line
string variable in Sass.
It keeps line breaks intact when compiled
if you're using the `expanded` output mode.";

For multi-line property values (like gradients) #

You don't even need quotes—just split the value across lines for readability, and Sass will compile it correctly:

$custom-gradient: linear-gradient(
  to right,
  #B06AB3,
  #4568DC,
  rgba(69, 104, 220, 0.8)
);

This will output as a clean single line (or preserved as multi-line) in your final CSS, no parsing issues at all.

2. Creating a combined variable for fallback color + gradients (outputting 3 background properties) #

Awesome request! To get Sass to output three separate background declarations (fallback color first, then WebKit gradient, then standard gradient) from a single variable, we'll use a list variable paired with a simple mixin. Here's how it works:

Step 1: Define your combined values as a list variable #

Store all three background values in a comma-separated list (split across lines for clarity):

$combined-background: #4568DC,
                      -webkit-linear-gradient(to right, #B06AB3, #4568DC),
                      linear-gradient(to right, #B06AB3, #4568DC);

Step 2: Create a mixin to output each value as a separate background property #

This mixin loops through the list and prints a unique background line for every item:

@mixin background-with-fallbacks($bg-values) {
  @each $value in $bg-values {
    background: $value;
  }
}

Step 3: Use the mixin in your styles #

Just include the mixin wherever you need the background styles:

.my-element {
  @include background-with-fallbacks($combined-background);
}

Compiled CSS output #

You'll get exactly the output you're looking for:

.my-element {
  background: #4568DC;
  background: -webkit-linear-gradient(to right, #B06AB3, #4568DC);
  background: linear-gradient(to right, #B06AB3, #4568DC);
}

Browsers will ignore any background declarations they don't support, so older browsers fall back to the solid color, while modern ones use the standard gradient (WebKit-based browsers will pick up the prefixed version first, though most don't need it anymore).

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