css - Sass 3.3.7 - 动态创建图标列表

Question

我有一个图标类名称列表，例如

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 。

欢迎任何有关解决此问题的最佳方法的建议。

Answer 1

$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%);