SASS &列表迭代/分隔符 [英] SASS & list iteration / delimiter

问题描述

我有一个模式，我创建了一个列表来迭代，作为一个基本的例子:

I've got a pattern where I create a list of lists to iterate over, as an basic example:

$carouselContent : "carousel-content-1" "buying_carousel_image_1.jpg", 
                   "carousel-content-2" "buying_carousel_image_2.jpg";

我的迭代(在 mixin 内部)看起来像:

My iteration (inside of a mixin) then looks like:

@each $carousel in $carouselContent {
  $baseClass: nth($carousel, 1);
  $image: nth($carousel, 2);
  .#{$baseClass} {
     ....
  }
}

我刚刚看到一个页面，目前轮播中只有 1 个项目.我想保持这种模式，但我不知道该怎么做.如果我迭代:

I just came across a page that presently only has 1 item in the carousel. I'd like to keep with the pattern, but I'm not sure how to do so. If I iterate over:

$carouselContent : "carousel-content-1" "growing_carousel_image_1.jpg";

SASS 将其视为 2 项列表.我可以通过向我的列表添加一个空项目，然后添加对空字符串的检查来解决这个问题，例如

SASS treats that as a 2 item list. I could work around that by adding an empty item to my list, then adding a check against empty string, e.g.

$carouselContent : "carousel-content-1" "growing_carousel_image_1.jpg","" "";

但这似乎很糟糕......所以我认为必须有一种我不知道的方法来做到这一点.

But that seems hacky... so I figured there has to be a way to do this that I'm unaware of.

推荐答案

您可以使用 @if 指令来检查列表的第一个元素是否也是 type-of() (然后才使用循环).沿着这些路线的东西(我将块与循环内部分开作为混合):

You can use an @if directive to check if the first element of your list is also a list with type-of() (and only then use the loop). Something along these lines (I separated the block from inside your loop as a mixin):

@mixin do_car($carousel) {
  $baseClass: nth($carousel, 1);
  $image: nth($carousel, 2);
  .#{$baseClass} {
    /* ... */
  }
}

@if (type-of(nth($carouselContent,1)) == list) {
  @each $carousel in $carouselContent {
    @include do_car($carousel);
  }
} @else {
  @include do_car($carouselContent);
}

这篇关于SASS &列表迭代/分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！