代码之家 › 专栏 › 技术社区 › Kristen Grote

替换sass mixin中@content指令内的变量

sass

Kristen Grote · 技术社区 · 6 年前

我正试图找出一种干燥易读的方法来循环遍历每个设计模式的颜色类。我认为可以这样做的一个好方法是将每个模式需要更改的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没有分析 @内容 声明和mixin变量一起,所以我得到一个 Undefined variable: "$color" 错误。

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

1 回复 | 直到 6 年前

ReSedano 6 年前

是的,是的。你可以使用 !global 标记创建一个全局变量,您也可以从mixin作用域中读取该变量。

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

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

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

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

这是给你的一个沙士: https://www.sassmeister.com/gist/8f90133f3ee1d2e67e21f086711cee39