Sass 3.3.7 - dynamically create list of icons

问题:

I have a list of icon class names like

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

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;}
...
...
...

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.

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

回答2:

Here is what i came up with. Output comes out like

.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; 
}

回答3:

Check out the @each feature, and combine it with a simple iterator and it'll do what you need:

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

You'll get css just like what you're after:

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

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

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

So, all you need is a list of your icons, then just do a little math!

回答4:

I always use compass for this. it works quite well for icons and can generate the sprite file for you. A tutorial is available I find using compass especially useful when setting up a new project with a often changing set of icons.