将 SASS 中的背景位置列表映射为函数

Question

我编写了以下循环来遍历团队列表以生成精灵图像的背景位置。我怎样才能把它变成一个函数，以便我可以传入 $teams、$X 和 $Y 值？

$teams: A, B, C, D;

$x: 0;
$y: 0;

@each $team in $teams {
    $i: index($teams, $team);
    $y: $y + 20px;
    .team#{$team}:before,
    .team#{$team}:after {
        background-position: $x $y;
    }
}

输出：

.teamA:before,
.teamA:after {
  background-position: 0 20px;
}

.teamB:before,
.teamB:after {
  background-position: 0 40px;
}

.teamC:before,
.teamC:after {
  background-position: 0 60px;
}

.teamD:before,
.teamD:after {
  background-position: 0 80px;
}

我面临的另一个问题是一些团队会共享相同的背景位置，因此所需的输出将是这样的：

.teamA:before,
.teamA:after,
.teamAB:before,
.teamAB:after {
  background-position: 0 20px;
}

.teamB:before,
.teamB:after {
  background-position: 0 40px;
}

.teamC:before,
.teamC:after
.teamCB:before,
.teamCB:after {
  background-position: 0 60px;
}

.teamD:before,
.teamD:after {
  background-position: 0 80px;
}

是否可以通过某些分隔符对团队名称进行分组，以便编译成相同的共享属性？

$teams: 'A AB', B, 'CB, C', D;

Answer 1

您可以检查当前索引是列表还是值。如果它是一个价值，那就做你已经在做的事情。如果它是一个元组，则遍历每个元组，将每个位置的位置设置为相同的值（仅当它是最外层列表上的新索引时才更改数值）。

$teams: A AB, B, CB C, D;

$x: 0;
$y: 0;

@each $team in $teams {
  $y: $y + 20px;

  @if type-of($team) == list {
    @each $team-sub in $team {
      .team#{$team-sub}:before,
      .team#{$team-sub}:after {
        background-position: $x $y;
      }
    }
  }
  @else {
    .team#{$team}:before,
    .team#{$team}:after {
      background-position: $x $y;
    }
  }
}

我已经对此进行了测试，它按预期工作。

编辑：这是一个带有复合选择器的更新版本。这将在未来从 SASS 中删除，因此使用风险自负。

$teams: A AB, B, CB C, D;

$x: 0;
$y: 0;

@each $team in $teams {
  $y: $y + 20px;

  @if type-of($team) == list {
    @each $team-sub in $team {
      $i: index($team, $team-sub);

      @if $i == 1 {
        .team#{$team-sub}::before,
        .team#{$team-sub}::after {
          background-position: $x $y;
        }
      }
      @else {
        .team#{$team-sub}::before {
          @extend .team#{nth($team, 1)}::before;
        }

        .team#{$team-sub}::after {
          @extend .team#{nth($team, 1)}::after;
        }
      }
    }
  }
  @else {
    .team#{$team}::before,
    .team#{$team}::after {
      background-position: $x $y;
    }
  }
}