Как я могу объявить переменную с двумя строками в SASS?

Question

Я хотел иметь переменную, которая принимает градиент с отступом в SASS.Как мне этого добиться?

Код, который я хочу в качестве одной переменной:

#4568DC;
-webkit-linear-gradient(to right, #B06AB3, #4568DC);
linear-gradient(to right, #B06AB3, #4568DC);

Другими словами, как я могу объявить три свойства в одной переменной, чтобы при ее компиляции он превращался в три свойства.Таким образом, ввод, как это:

background: $combined-variable

Должен дать следующий вывод:

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

Answer 1

Вы на самом деле не хотите решать проблему с помощью одной переменной с текстовой заменой. Вместо этого взгляните на sass mixins , потому что они обеспечивают именно то поведение, которое вы хотите. Вы можете использовать их как:

@mixin gradient($color) {
    background: $color;
    background: -webkit-linear-gradient(to right, #B06AB3, $color);
    background: linear-gradient(to right, #B06AB3, $color);
}

.my-rule {
    display: inline;
    @include gradient(#4568DC);
}