Question

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

AUTH-单个多，AUTH-批次，AUTH-文件，AUTH-IMP-文件，AUTH-人基金-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，所以会热衷于使用一些新功能，例如地图。

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

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

Answer 2

这是我想出的。输出就像

.cdm-auth-single-multi {
    background-position: 0 0px; 
}

SASS

$icons : (
auth-single-multi,
auth-batch,
auth-file,
auth-imp-file,
auth-man-fund-tran,
rel-single-multi,
rel-batch,
init-pre,
bal-enq,
pay-status-enq,
intra-cash-pos,
imp-lc-issu,
imp-lc-amend,
imp-lc-bill-disc,
gnt-stdby-lc-issu,
gnt-stdby-lc-amend,
open-ac-dan-clean,
open-ac-dan-disc,
exp-coll-dir,
exp-coll-exp-doc,
imp-coll-notif
);

$j : 0;
@each $className in $icons {
.cdm-#{$className} {
   background-position:0 #{$j}px; 
}

$j : $j - 25 !global; 
}

Answer 3

查看@each功能，并将其与简单的迭代器结合使用，它将满足您的需求：

$i : 0;
@each $animal in puma, cat, dog {
    $i : $i+1;
    .#{$animal} {
        background-position:0 -$i*25px;
    }
}

你将得到的css就像你所追求的那样：

  .puma {
    background-position: 0 -25px; }

  .cat {
    background-position: 0 -50px; }

  .dog {
    background-position: 0 -75px; }

所以，你只需要一个你的图标列表，然后做一些数学运算！

Answer 4

我总是使用罗盘。它适用于图标，可以为您生成精灵文件。 A tutorial is available我发现在使用经常更改的图标设置新项目时，使用指南针特别有用。

Sass 3.3.7 - 动态创建图标列表

4 个答案: