如何使用@ in sass将背景职位分配给多个类

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

好吧，你可以用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;
}

你必须用你所有的课程来完成这个列表。

致以问候。