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);
}

如何在SASS中声明双线变量？

1 个答案: