有没有办法在mixin中使用参数在mixin中使用SASS生成变量名?

时间:2014-02-13 23:10:32

标签: sass interpolation dry mixins

关于这个问题,这里是我正在尝试做的一个例子,但是我觉得使用SASS进行插值在使用参数在mixin中输出变量时不起作用。


    $red: #f00;

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

    @include color-accent-class(red);

最终我正在尝试将重复代码放在DRY下面,所以我不会重复自己所有的草率风格,我想知道是否应该使用@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 个答案:

答案 0 :(得分:0)

非常感谢@ 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));
    }