Proposal for maps loops mixins

[titouanmathis]

In order to ease the use of our configuration maps, I think we could create a function/mixin to automatically generate CSS based on their values.

For example, we often use the values of breakpoints as modifiers with the following @each loop:

.my-class {
  display: block;
}

@each $breakpoint in $breakpoints {
  $key: nth($breakpoint, 1);

  @media #{md($key} {
    .my-class--#{$key} {
      display: block;
    }
  }
}

What if we could abstract this @each mechanic into a mixin or a function? I have a working, but limited, example for a mixin:

@mixin breakpoints-modifier {
  @each $breakpoint in $breakpoints {
    $key: nth($breakpoint, 1);

    @media #{md($key)} {
      &--#{$key} {
        @content;
      }
    }
  }
}

.my-class {
  display: block;

  @include breakpoints-modifier {
    display: block;
  }
}

I would be glad to have some feedback on this, @studiometa/studiometa-scss-toolkit 🙂

[w-jerome]

I thinks is a better pratice. We rewrite the previous function who use it ?

[perruche]

👍 dry approach This will be clearer to read, and easier to update in the future.

Shall we also add a way to pass a force option ?

[lusimeon]

It will be usefull, but it need to be more extendable:

• Allow to remove some breakpoints or specify the breakpoints to loop on. (eg: @include breakpoints-modifier(('xs, 's', 'xl)))
• Reuse the $key parameter thanks to @receive directive.

[titouanmathis]

• I am a fan of passing a list of breakpoints to exclude (or to include) in the mixin parameters 👍
• I opened a PR on the Gulp Config repository to use dart-sass to compile our SCSS files in order to be able to use content arguments, the syntax is the following:

@mixin for-each-breakpoints() {
  @each $breakpoint in $breakpoints {
    $key: nth($breakpoint, 1);

    @media #{md($key)} {
      @content ($key);
    }
  }
}

.foo {
  display: block;
}

@include for-each-breakpoints using ($key) {
  .foo--#{$key} {
    display: block;
  }
}

[perruche]

Like @lusimeon idea to have a list of breakpoints to include, to reduce the number of generated classes. In order to make this work we need a dedicated $var for each loop ? Or I am missing something ?

[titouanmathis]

See #21 for a more detailed proposal.

[titouanmathis]

Closed by #21 🙂