postcss-eachpostcss 迭代数值插件
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; }
评论