Question

我目前正在使用Karl Merkli的REM mixin。

它很棒，但是我发现我在这个过程中写了很多@includes。例如：

    @include rems(height, 1);
    @include rems(width, 1);
    @include rems(margin, 1, 0, 4, 0);
    @include rems(padding, 0.5, 1);
    // plus all other @includes Ii might use too
    @include opacity(0.7);
    @include clearfix;
    // etc

我试图找出一种方法，将对同一个mixin的引用合并为一个。最终，我正在寻找一种解决方案，我可以写下类似以下的内容：

    @include rems(height, 1; width, 1; margin, 1, 0, 4, 0; padding, 0.5, 1;);

提前致谢

Answer 1

解决方案是创建一个中间的mixin，其中列出了列表并将每个列表移到rems mixin：

@mixin multi-rems($lists) {
    @each $list in $lists {
        @include rems($list...);
    }
}

然后像这样使用它：

li {
    @include multi-rems(((margin, 0, 4), (padding, 2, 3)));
}

这是一个SassMeister Gist。欢呼声。

SCSS rem mixin具有多个属性

1 个答案: