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

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

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

我尝试完成的是通过使用新变量（$themecolor）来创建变量（$orangeTp 或 $orangeBt），这样我就可以写：

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

我为你创建了一个 Sassmeister：https://www.sassmeister.com/gist/e9cf096735ec51b2243a634ae19b9946