Question

我试图找出一种DRY可读的方法来遍历每种设计模式的颜色类别。我认为可以做到这一点的一种好方法是将需要为每个模式更改的CSS属性与变量一起传递给mixin，并且mixin会在@content声明内换出变量：

$color-list: (
    "c1" : #ed0ead, 
    "c2" : #12bc21,
    "c3" : #2666cc
);

@mixin color-variants {
    @each $class, $color in $color-list {
        &.#{$class} {
            @content;
        }
    }
}

.my-module {
    padding: 1rem;
    background-color: #fff;
    border-top-size: 5px;
    border-top-style: solid;
    @include color-variants {
        border-top-color: $color;
    }
}

.another-module {
    padding: 1rem;
    border-radius: 5px;
    border-size: 2px;
    border-style: solid;
    @include color-variants {
        background-color: rgba($color, 0.5);
        &:hover {
          color: $color;
        }
    }
}

不幸的是，SASS不会将@content声明与mixin变量一起解析，所以出现了Undefined variable: "$color"错误。

是否可以使用现有的SASS工具执行类似的操作？

Answer 1

是的。您可以使用.Jenkinsfile标志创建一个全局变量，也可以从mixin范围之外读取该变量。

!global

这对你很刺客：https://www.sassmeister.com/gist/8f90133f3ee1d2e67e21f086711cee39

在SASS Mixin中替换@content指令内部的变量

1 个答案: