Sass 3.3.7 - 动态创建图标列表

问题描述

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

I have a list of icon class names like

auth-single-multi，auth-batch，auth-file，auth-imp-file，auth-man -fund-tran

auth-single-multi,auth-batch,auth-file,auth-imp-file,auth-man-fund-tran

我想循环遍历这个列表（共有100个图标），并为每个图标的background-position-y属性定义一个类25px比上一个图标值

I want to loop through this list (100 icons in total) and define a class for each where each icon's background-position-y property is 25px less than the previous icon value

.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，所以很想使用一些新的功能，如地图。

I'm using the latest version of Sass so would be keen to use some new features such as maps.

欢迎任何建议，最好的方法。

Any suggestions on the best way to approach this would be welcome.

推荐答案

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

这篇关于Sass 3.3.7 - 动态创建图标列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！