css - 我如何在sass中使用@for将背景位置分配给多个类

Question

好的，这是我的代码:

.file-icon,.folder-icon{
      $size:24px;
      position: absolute;
      top: 10px;
      left: 44px;
      display: block;
      float: left;
      width: $size;
      height: $size;
      margin-right: 10px;
      background: $driveIcon;

      &.folder-close{
        background-position: 0 -72px;
        &.folder-open{
          background-position: -$size -72px;
        }
      }

      &.archiveIcon{
        background-position: -$size*2 -72px;
      }
      &.audioIcon{
        background-position: -$size*3 -72px;
      }
      &.brokenIcon{
        background-position: -$size*4 -72px;
      }
      &.docIcon{
        background-position: -$size*5 -72px;
      }
      &.imgfile{
        background-position: -$size*6 -72px;
      }
      &.pdfIcon{
        background-position: -$size*7 -72px;
      }
      &.pptx{
        background-position: -$size*8 -72px;
      }
      &.txtIcon{
        background-position: -$size*9 -72px;
      }
      &.unknown{
        background-position: -$size*10 -72px;
      }
      &.videoIcon{
        background-position: -$size*11 -72px;
      }
      &.xlsIcon{
        background-position: -$size*12 -72px;
      }
      &.viewer{
        background-position: -$size*13 -72px;
        &.folder-open{
          background-position: -$size*14 -72px;
        }
      }
      &.owner{
        background-position: -$size*15 -72px;
        &.folder-open{
          background-position: -$size*16 -72px;
        }
      }
      &.moderator{
        background-position: -$size*17 -72px;
        &.folder-open{
          background-position: -$size*18 -72px;
        }
      }
    }

我想做的是自动分配背景定位。我尝试将 @for 用于实际语句，但无法弄清楚如何将结果一一分配给我的自定义第二类。请帮助我，我是 sass 的初学者。谢谢。

这是我到目前为止所做的:

@for $i from 0 to 18{ background-position: -($size*$i} -72px; }

Answer 1

好吧，您可以为 Sprite 使用 sass 列表。

这里有一个方法:

$list: archiveIcon, audioIcon;
$size: 24px;
$totalClasess: 2;
@each $value in $list {
  &.#{$value} {
    background-position: -($size*$totalClasses) -72px;

    @if $value == folder-close {
      &.folder-open {
        background-position: -$size -72px;
      }
    }
  }
  $totalClasses: $totalClasses + 1;
}

您必须完成所有类(class)的列表。

问候。