在@每个具有多个值的循环中获取(value+1)

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

我想通过将其中一些实用程序类仅绑定到它们的响应状态来改变这种行为，这样就没有必要取消。

目前，负责生成这些实用程序类的mixin看起来是这样的(它使用Sassmq(：

@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. 如何获取映射中的下一个值？

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 repsotory，使用github页面来处理这一问题。如果你想在codepen、jsFiddle等中快速实现inuitcss，请在这里找到它(包括"受限响应空间"类和其他类(：

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

这里有一个示例代码笔，展示了如何将inuitcss包含到代码笔中：

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

至于生成"受限响应间隔"类的SCSS函数(我现在称之为(，我做了以下操作：

在最内部的循环中，一个新的变量$next保存映射的next值。

• 如果该值不为null，则创建媒体查询和类后缀为"-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;
//      }
//    }
//  }
// }
}
}
}
}

谢谢你，雷塞达诺！