Question

我有一个mixin用于多个地方。我想知道是否也可以将此mixin作为参数传递。这是我的代码示例：

.modules-component {
    ion-content {
        &.math {
            @include scroll-content(ocean);

            scroll-content {
                ion-item-group {
                    ion-item:nth-child(3) {
                        @include linear-gradient(to left, color($colors, lagoon) 15%, color($colors, ocean) 100%, color($colors, ocean) 100%);
                    }
                }
            }
        }

        &.english {
            @include scroll-content(meadow);

            scroll-content {
                ion-item-group {
                    ion-item:nth-child(3) {
                        @include linear-gradient(to left, color($colors, lemon) 15%, color($colors, meadow) 100%, color($colors, meadow) 100%);
                    }
                }
            }
        }

        &.german {
            @include scroll-content(petal);

            scroll-content {
                ion-item-group {
                    ion-item:nth-child(3) {
                        @include linear-gradient(to left, color($colors, lilac) 15%, color($colors, petal) 100%, color($colors, petal) 100%);
                    }
                }
            }
        }
    }
}

如果您看到scroll-content区域始终相同包含，则除了颜色值不同之外。如何简化上面的代码？

Answer 1

您可以尝试使用scss @each循环和哈希。 E.g：

ion-content {
    @each $class, $color in (("english": "meadow"), ("math": "ocean"), ("german": "petal")) {
        &.#{$class} {
            @include scroll-content($color);

            scroll-content {
                ion-item-group {
                    ion-item:nth-child(3) {
                        @include linear-gradient(to left, color($colors, lemon) 15%, color($colors, $color) 100%, color($colors, $color) 100%);
                    }
                }
            }
        }
    }
}

将@mixin作为参数传递

1 个答案: