我有一个图标类名列表,例如
auth-single-multi,auth-batch,auth-file,auth-imp-file,auth-man-fund-tran
我想遍历这个列表(总共 100 个图标)并为每个图标定义一个类,其中每个图标的 background-position-y 属性比前一个图标值小 25px
.auth-single-multi { background-position:0 0;}
.auth-batch { background-position:0 -25px;}
.auth-file { background-position:0 -50px;}
.auth-imp-file { background-position:0 -75px;}
...
...
...
我使用的是最新版本的 Sass,因此很想使用一些新功能,例如 map 。
欢迎就解决此问题的最佳方法提出任何建议。
最佳答案
$list : single-multi batch file imp-file man-fund-tran;
@mixin gen($selector, $postfix-list, $property-name, $delta) {
$i : 0;
@each $postfix in $postfix-list {
#{$selector + $postfix}{
#{$property-name} : $i;
}
$i : $i - $delta;
}
}
@include gen(".auth-px-", $list, 'background-position-left', 25px);
@include gen(".auth-percentage-", $list, 'background-position-top', 50%);
关于css - Sass 3.3.7 - 动态创建图标列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26269234/