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

Question

为了完成我的 CSS，我使用了 SCSS 框架 inuitcss ( https://github.com/inuitcss/inuitcss )，它提供了响应式间距的实用程序，如下所示:

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

像这样的类遵循“移动优先”的方法，这意味着，如果平板电脑或桌面状态发生变化，则需要使用另一个实用程序类来“覆盖”或“取消”，看起来像这样:

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

我想通过将其中一些实用程序类仅绑定(bind)到它们的响应状态来更改此行为，这样就不需要取消。

目前，负责生成这些实用程序类的 mixin 看起来像这样(它使用 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});
  }
}

为了实现我的目标，我必须调整 @include mq( 函数以使用第二个参数，如下所示:

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

这是我的问题:

1. 如何获取 map 中的下一个值？

2. 如果没有下一个值，我该如何防止错误？

我至少设法得到了索引值，像这样:

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

为了更容易测试，我用这段代码准备了一个代码笔，可以在这里找到: https://codepen.io/rowild/pen/EOgvKy

Answer 1

由于目前无法从 codepen 中链接到 Inuitcss(也没有 CDN)，我首先必须准备一个 github 存储库，使用 github pages 来处理这个问题。如果您想在 codepen、jsFiddle 等(包括“restricted responsive spacings”类和其他类)中快速实现 inuitcss，请在这里找到它:

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

可在此处找到显示如何将 inuitcss 包含到代码笔中的代码笔示例:

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

至于生成“restricted responsive spacings”类(我现在这样调用它们)的 SCSS 函数，我做了以下操作:

在最内层的循环中，一个新变量 $next 保存 map 的 next 值。

• 如果该值不为空，则创建媒体查询和类 一个“-only”后缀。
• 如果值为 false，什么也不做(因为 常规的 inuitcss 间距类已经涵盖了该场景；我 尽管如此，还是在这里留下了注释代码，也许它起到了 目的……):

新函数如下所示:

//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;
      //      }
      //    }
      //  }
      // }
      }
    }
  }
}

谢谢，ReSedano !