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

Question

尝试创建一个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;
    }
}

RESULT :::::::::::::::::

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

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