postcss-eachpostcss 迭代數(shù)值插件

postcss-each 是一個 postcss 的插件，用來迭代數(shù)值。

迭代數(shù)值：

@each $icon in foo, bar, baz {
  .icon-$(icon) {    background: url('icons/$(icon).png');
  }
}

.icon-foo {  background: url('icons/foo.png');
}.icon-bar {  background: url('icons/bar.png');
}.icon-baz {  background: url('icons/baz.png');
}

通過索引值迭代數(shù)值：

@each $val, $i in foo, bar {
  .icon-$(val) {    background: url("$(val)_$(i).png");
  }
}

.icon-foo {  background: url("foo_0.png");
}.icon-bar {  background: url("bar_1.png");
}

迭代多重數(shù)值：

@each $animal, $color in (puma, black), (sea-slug, blue) {
  .$(animal)-icon {    background-image: url('/images/$(animal).png');    border: 2px solid $color;
  }
}

.puma-icon {  background-image: url('/images/puma.png');  border: 2px solid black;  
}.sea-slug-icon {  background-image: url('/images/sea-slug.png');  border: 2px solid blue;
}