尝试创建一个 Sass mixin，它会写入一长串语义图标名称，并附加一个唯一的迭代数字答案

【问题标题】：Trying to create a Sass mixin that writes a long list of semantic icon names appending a uniquely iterated number尝试创建一个 Sass mixin，它会写入一长串语义图标名称，并附加一个唯一的迭代数字
【发布时间】：2014-03-20 23:00:32
【问题描述】：

试图创建一个 Sass mixin，它会写入一长串语义图标名称，并附加一个唯一的迭代数字。

Sass 块

$icon-name: pencil trash calendar;
$icon-num: length($icon-name);


@for $i from 1 through $icon-num {
    $class-slug: test-icon !default;
    .#{$class-slug}-#{$icon-name}-#{$icon-num} {
        content: $i;
    }
}

结果:::::::::::::::::

.test-icon-pencil trash calendar-3 {
  content: 1;
}
.test-icon-pencil trash calendar-3 {
  content: 2;
}
.test-icon-pencil trash calendar-3 {
  content: 3;
}

【问题讨论】：

标签： sass compass-sass

【解决方案1】：

想通了 - $collection 就像一个 Sass 数组：

$collection: (pencil, trash, calendar);
$icon-num: length($collection);
$class-slug: test-icon !default;

@for $i from 0 to $icon-num {

    $this-name: nth($collection, $i+1);
    .#{$class-slug}-#{$this-name} {
        content: $i;
    }
}

输出渲染：

.test-icon-pencil {
  content: 0;
}
.test-icon-trash {
  content: 1;
}
.test-icon-calendar {
  content: 2;
}

【讨论】：