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));
  }
}

SASS＆amp;列表迭代/分隔符

3 个答案:

DEMO