Brian Edelman Brian Edelman - 2 months ago 7x
Sass (Sass) Question

SCSS rem mixin that takes multiple properties

I'm currently using the REM mixin by Karl Merkli.

It works great, however I'm finding I'm writing a lot of @includes in the process. for example:

@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

I'm trying to work out a way of consolidating the references to the same mixin into one. Ultimately I'm looking for a solution where I could write something similar to the following:

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

Thanks in advance


A solution would be to create an in-between mixin that takes a list of lists and hands each list off to the rems mixin:

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

And then use it like so:

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

Here's a SassMeister Gist. Cheers.