有没有办法在mixin中使用参数在mixin中使用SASS生成变量名？ [重复]-Java 学习之路

这个问题在这里已有答案：

Creating or referencing variables dynamically in Sass 5个答案

关于这个问题，这里有一个我正在尝试做的例子，但我有一种感觉，使用SASS插值在使用参数在mixin中输出变量时不起作用 .

$red: #f00;

    @mixin color-accent-class($color) {
        .#{$color}-accent {
            color: $#{$color};
        }
    }

    @include color-accent-class(red);

最终我不会重复自己的所有草率风格，我想知道是否应该使用 @function 和/或 @each 或其他一些与SASS的循环动作 . 提前感谢任何指导！

$blue: #2a62a7;
    $red: #db0042;
    $purple: #5b3b9f;
    $orange: #f7911a;
    $light-blue: #46aeed;
    $green: #49b842;


    @mixin product-accent($color-name, $hexval) {

        .product-accent-#{$color-name} {

            img {
                border: {
                    left: {
                        style: solid;
                        width: 10px;
                        color: $hexval;
                    }
                }
            }
            h3, b {
                color: $hexval;
            }
            .button {
                @extend .button.#{$color-name};
            }
        }

    }

    @include product-accent(black, #000);
    @include product-accent(blue, $blue);
    @include product-accent(red, $red);
    @include product-accent(purple, $purple);
    @include product-accent(orange, $orange);
    @include product-accent(light-blue, $light-blue);
    @include product-accent(green, $green);

1 回答

非常感谢@ martin-turjak的帮助 . 使用SASS列表， nth() 和 @for 循环就是这个诀窍 . 如果有更清洁的方法，请发信息 .

$color-names: black, blue, red, purple, orange, light-blue, green;
    $color-hexvals: #000, $blue, $red, $purple, $orange, $light-blue, $green;

    @for $i from 1 through length($color-names) {
        @include product-accent(nth($color-names, $i), nth($color-hexvals, $i));
    }

回复于 2024-04-27T13:27:25+08:00

有没有办法在mixin中使用参数在mixin中使用SASS生成变量名？ [重复]

1 回答

相关问题