postcss-each 介绍
postcss-each 是一个 postcss 的插件，用来迭代数值。
迭代数值：
@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');
}
通过索引值迭代数值：
@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");
}
迭代多重数值：
@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;
}
postcss-each 官网
https://github.com/outpunk/postcss-each
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
