css - 具有多个属性的 SCSS rem mixin

Question

我目前正在使用 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

一个解决方案是创建一个中间混入，它接受一个列表列表并将每个列表交给 rems 混入:

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

然后像这样使用它:

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

这是一个 SassMeister Gist .干杯。