SASS & 列表迭代/定界符

Question

作为一个基本示例，我有一个模式，可以创建一个列表进行迭代：

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

我的迭代（在 mixin 内部）看起来像：

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

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

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

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

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

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

Answer 1

在 Sass 3.3.0 中，您需要做的就是在结尾添加一个逗号，以表示您所拥有的是一个包含一个项目的列表：

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

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

生成：

.carousel-content-1 {
  color: red;
}

Sass 3.3.0 仍在开发中，但您现在可以通过gem install sass --pre 升级到最新的边缘版本来使用它。但是，如果您愿意升级到 3.3，则可能需要查看映射（请参阅：the change log）

Answer 2

您可以使用@if 指令来检查列表的第一个元素是否也是带有type-of() 的列表（然后才使用循环）。沿着这些思路（我将块与循环内部分开作为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);
}

DEMO

Answer 3

如果您的项目按顺序编号，则可以使用 for 循环：

$carouselImages: 2;
@for $i from 1 through $carouselImages {
  .#{carousel-content-#{$i}} {
     background: url(buying_carousel_image_#{$i}.jpg);
  }
}

输出：

.carousel-content-1 {
  background: url(buying_carousel_image_1.jpg);
}

.carousel-content-2 {
  background: url(buying_carousel_image_2.jpg);
}

交替：

//$carouselContent : "buying_carousel_image_1.jpg", "buying_carousel_image_2.jpg";
$carouselContent : "buying_carousel_image_1.jpg";

@for $i from 1 through length($carouselContent) {
  .#{carousel-content-#{$i}} {
     background: url(nth($carouselContent, $i));
  }
}