CODEWITHSUNDEEP
sasseach
Robert Wildling
Robert Wildling

Reputation: 1186

Get (value + 1) in @each loop with multiple values

To accomplish my CSS, I use the SCSS framework inuitcss (https://github.com/inuitcss/inuitcss), which provides utilities for responsive spacings that look like this:

.u-1/3@mobile
.u-margin-bottom@mobile

A class like this follows the "mobile first" approach, which means, if there is change in a tablet or desktop state, it needs to be "overwritten" or "cancelled" by the use of another utility class, which looks like this:

.u-1/2@tablet
.u-margin-bottom-none@tablet

I would like to change this behaviour by tying some of those utility classes to their responsive state only, so that a cancellation is not necessary.

Currently, the mixin responsible for the generation of those utility classes looks like this (it uses Sass-mq):

@each $inuit-bp-name, $inuit-bp-value in $mq-breakpoints {  
  @include mq($from: $inuit-bp-name) {
    @include inuit-widths($inuit-fractions, #{$inuit-widths-breakpoint-separator}#{$inuit-bp-name});
  }
}

In order to achieve my goal, I would have to adapt the @include mq( function to use a second parameter, which would look like this:

@include mq($from: $inuit-bp-name, $to: [next $inuit-bp-name]) {

And here are my problems:

  1. How do I get the next value in the map?

  2. How would I possibly prevent an error if there is no next value?

I at least managed to get the index value, like this:

@each $inuit-bp-name, $inuit-bp-value in $mq-breakpoints {  
  $i: index(($mq-breakpoints), ($inuit-bp-name $inuit-bp-value));
  @debug "INDEX" $i;
}

For easier testing I prepared a codepen with this code, which can be found here: https://codepen.io/rowild/pen/EOgvKy

Upvotes: 3

Views: 194

Answers (1)

Robert Wildling
Robert Wildling

Reputation: 1186

Since it is currently not possible to link to Inuitcss from within codepen (neither is there a CDN), I first had to prepare a github repsoitory that takes care of that using github pages. Please find it here, if you want to quickly implement inuitcss in codepen, jsFiddle etc, too (including the "restricted responsive spacings" classes and others):

https://github.com/rowild/inuitcss-generated

A example codepen that shows how to include inuitcss into codepen can be found here:

https://codepen.io/rowild/pen/YRVvRe

As for the SCSS function that generates "restricted responsive spacings" classes (as i call them now), I did the following:

In the innerest loop, a new variable $next holds the map's next value.

  • If that value is not null, create the media query and the class with a "-only" suffix.
  • If the value is false, do nothing (because the regular inuitcss spacing classes cover that scenario already; I left the commented code here nevertheless, maybe it serves a purpose...):

The new function looks like this:

//scss
@if ($inuit-restricted-responsive-spacing-properties != null) {
  @each $property-namespace, $property in $inuit-restricted-responsive-spacing-properties {
    @each $direction-namespace, $direction-rules in $inuit-restricted-responsive-spacing-directions {
      @each $size-namespace, $size in $inuit-restricted-responsive-spacing-sizes {
    @each $inuit-bp-name, $inuit-bp-value in $mq-breakpoints {

      // Check, if the next breakpoint exists; if not, do not generate any classes.
      // Add a '-only' suffix (could probably be made configurable via a variable...)
      $next: map-get-next($mq-breakpoints, $inuit-bp-name, null);

      @if ($next) {
        @include mq($from: $inuit-bp-name, $until: map-get-next($mq-breakpoints, $inuit-bp-name, null)) {
          .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace}#{$inuit-widths-breakpoint-separator}#{$inuit-bp-name}-only {
            @each $direction in $direction-rules {
              #{$property}#{$direction}: $size !important;
            }
          }
        }
      }

      // Not necessary, because this os covered by the regular inuitcss classes already
      // @else {
      //  @include mq($from: $inuit-bp-name) {
      //    .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace}#{$inuit-widths-breakpoint-separator}#{$inuit-bp-name} {
      //      @each $direction in $direction-rules {
      //        #{$property}#{$direction}: $size !important;
      //      }
      //    }
      //  }
      // }
      }
    }
  }
}

Thank you, ReSedano!

Upvotes: 1

Related Questions