Question

这些是一些颜色变种

$orangeTp            :#ec6532;
$orangeBt            :#f58795;
$orangeNv            :#ea6740;

这是我的渐变混合

@mixin gradient-bg($color1,$color2){
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from($color1),
        to($color2)
    );
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
}

我像这样使用它们：

.bg-orange {
    @include gradient-bg($orangeTp,$orangeBt); 
}

这是我尝试使用并失败的新混音

@mixin themes($themecolor) {
    @include gradient-bg(#{$themecolor}+Tp,#{$themecolor}+Bt);
    a {
        color: #{$themecolor}+Nv;
        &:hover {
            color: #{$themecolor}+Tp;
        }
    }
}

我要完成的工作是使用新变量（$orangeTp）创建变量（$orangeBt或$themecolor），以便编写：

.bg-orange {
    @include themes('$orange');
}

Answer 1

您不能使用插值来创建动态变量，但是地图可以帮助您解决问题：

$colors: (
  orangeTp:#ec6532,
  orangeBt:#f58795,
  orangeNv:#ea6740
);

@mixin gradient-bg($color1,$color2){
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from($color1),
        to($color2)
    );
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
}

@mixin themes($themecolor) {
    @include gradient-bg(map-get($colors, $themecolor#{Nv}), map-get($colors, $themecolor#{Bt}));
    a {
        color: map-get($colors, $themecolor#{Nv});
        &:hover {
            color: map-get($colors, $themecolor#{Tp});
        }
    }
}

.bg-orange {
    @include themes(orange);
}

我为您创建了一个刺客：https://www.sassmeister.com/gist/e9cf096735ec51b2243a634ae19b9946

SCSS组合变量或使用mixin创建新变量

1 个答案: