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如下所示（它使用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]) {

这是我的问题：

如何获取地图中的下一个值？
如果没有下一个值，如何防止错误？

我至少设法获得了索引值，如下所示：

@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 repsoitory，以使用github页面来解决这个问题。如果您也想在codepen，jsFiddle等中快速实现inuitcss（包括“受限响应间隔”类和其他类），请在这里找到：

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

可以在此处找到显示如何将inuitcss包含在codepen中的示例codepen：

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

对于生成“受限响应间隔”类的SCSS函数（我现在称之为它们），我做了以下事情：

在最内部的循环中，新变量updateProfile保留了地图的fetch("https://randomuser.me/api/?results=5000") .then(t=>t.JSON()) .then(result=>console.log(result))值。

如果该值不为null，请使用以下命令创建媒体查询和类一个“仅”后缀。
如果该值为false，则不执行任何操作（因为常规的inuitcss间隔类已经涵盖了该场景；一世仍然将评论的代码留在这里，也许它可以目的...）：

新功能如下：

$next

谢谢ReSedano！

在@each循环中使用多个值获取（值+ 1）

1 个答案: