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

Posted 2023-03-16

【中文标题】在具有多个值的@each 循环中获取 (value + 1)

【英文标题】：Get (value + 1) in @each loop with multiple values

【发布时间】：2019-04-14 09:06:54

【问题描述】：

为了完成我的 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;

为了更容易测试，我准备了一个带有此代码的 codepen，可以在这里找到： https://codepen.io/rowild/pen/EOgvKy

【问题讨论】：

我认为这个人为你写了解决方案：github.com/elcheio/sass-map-get-next-prev :-)

这看起来很棒，我认为这正是我所需要的 - 级长，非常感谢！ - 您能否发布您的解决方案作为答案，然后我可以投票！

不客气！ :-) 感谢@Robert Wildling 的提议，非常感谢！但这一次我什么也没做。我刚刚找到了一份出色的 Web 开发人员工作。他值得投票，而不是我;-)

感谢您的谦虚！！！但这不仅是为了给您一些分数，而且还表明该问题已得到肯定的回答，这可能对其他人有所帮助……那么无论如何我有机会说服您将您的解决方案发布为答案吗？ :-D

你是对的！我们可以这样做：您为什么不完成您的工作，使其与开发人员的 map-get-next 函数一起使用，然后将其作为答案发布？我将是第一个投票的人！ ;)

【参考方案1】：

由于目前无法从 codepen 中链接到 Inuitcss（也没有 CDN），因此我首先必须准备一个 github 存储库，该存储库使用 github 页面来处理该问题。如果您也想在 codepen、jsFiddle 等中快速实现 inuitcss（包括“限制响应间距”类等），请在这里找到它：

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

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

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

至于生成“受限响应间距”类（我现在称之为）的 SCSS 函数，我做了以下操作：

在最里面的循环中，一个新变量 $next 保存地图的 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！