SASSのバックグラウンド位置のリストを関数としてマッピングする

Question

次のループを実行して、チームのリストをループしてスプライトイメージの背景位置を生成しました。代わりに$チームと$ 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, 
.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; 
} 

がそれをです：いくつかのチームが同じ背景の位置を共有することになり、私が直面しているもう一つの問題がある

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

は、したがって、所望の出力は、このようなようなものになるだろういくつかの区切り記号でチーム名をグループ化し、同じ共有プロパティにコンパイルすることは可能ですか？

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

Answer 1

現在のインデックスがリストまたは値であるかどうかを確認できます。それが価値なら、あなたがすでにやっていることをやりなさい。それがタプルの場合は、それぞれの値を同じ値に設定します（最も外側のリストの新しいインデックスの場合のみ数値を変更します）。

私はこれをテストして、期待どおりに動作します。

編集：ここにはコンパウンドセレクタの更新版があります。これは将来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; 
    } 
    } 
}