2つのリストエントリと2つの変数を含むものと一致させる

Question

2つのリストがあります。

$ spriteList： mario、goomba、spike、coinbox;

$ spriteCrop： （-80px、1ピクセル）、（-480px、1ピクセル）、（-640px、1ピクセル）、（-800px、1ピクセル）。

私は出力を必要とする：

.mario{ 
    @include sprite(-80px, 1px); 
} 

.goomba{ 
    @include sprite(-480px, 1px); 
} 

.spike{ 
    @include sprite(-640px, 1px); 
} 

.coinbox{ 
    @include sprite(-800px, 1px); 
} 

これは、私が使用していますミックスインです：

@mixin sprite($x, $y, $w: 80px, $h: 80px, $repeat: no-repeat ) { 
    width: $w; 
    height: $h; 
    background-image: url($spriteUrl); 
    background-position: $x $y; 
    background-repeat: $repeat; 
    } 

を以下は、私は、任意のアイデアを動作していないソリューションで使用していたループのですか？

@each $sprite in $spriteList { 
     $i: index($spriteList, $sprite); 
     .#{$sprite} { 
     @include sprite(nth($spriteCrop, $i)); 
    } 
    } 

Answer 1

は、ここでは、変数の有限数を必要な結果である：

//--------------------------------// 
//vars 
//-------------------------------// 
$spriteUrl: 'https://www.creativemonarchy.com/wp-content/uploads/2016/11/sprites-1.png'; 
$blue: #6095f5; 
$brown: #d54b00; 
$green: #80d010; 
$fontCol: #fff; 
$sx: 80px; 

$spriteList: 
mario, goomba, spike, coinbox, turtle, cloudDude, flytrap, bricks, cloudL, cloudM, cloudS, fence, pipe, hill, bushes, coin, tree, triPipe, logo; 
$spriteCrop: 
    (
(-80px, 1px , $sx , $sx), //mario 
(-480px, 1px , $sx , $sx), //goomba 
(-640px, 1px , $sx , $sx), //spike 
(-800px, 1px , $sx , $sx), //coinbox 
(0px, -80px, 80px, 160px), //turtle 
(-160px, -80px, 80px, 160px), //cloudDude 
(-320px, -81px, 80px, 159px), //flytrap 
(-480px, -80px , $sx , $sx), //bricks 
(-560px, -144px, 256px, 96px), //cloudL 
(-560px, -304px, 192px, 96px), //cloudM 
(-400px, -304px, 128px, 96px), //cloudS 
(-240px, -240px, 160px, 80px), //fence 
(-240px, -320px, 128px, 127px), //pipe 
(0px, -580px, 524px, 140px), //hill 
(0px, -736px, 592px, 64px), //bushes 
(-880px, -120px, 25px, 40px), //coin 
(0px, -240px, 240px, 320px), //tree 
(0px, -800px, 340px, 400px), //triPipe 
(-640px, -404px, 303px, 184px) //logo 
    ); 
//--------------------------------// 
//mixins 
//-------------------------------// 
@mixin sprite($x, $y, $w, $h, $repeat: no-repeat ) { 
    width: $w; 
    height: $h; 
    background-image: url($spriteUrl); 
    background-position: $x $y; 
    background-repeat: $repeat; 
} 
//--------------------------------// 
//general 
//-------------------------------// 
body{ 
    background-color: $blue; 
} 
//--------------------------------// 
//layout 
//-------------------------------// 
.spritesheet{ 
    max-width: 100%; 
    width: 100vw; 
    flex-wrap: wrap; 
    display: flex; 
    align-items: baseline;} 
.ground{ 

} 
//--------------------------------// 
//sprites 
//-------------------------------// 
@each $sprite in $spriteList { 
    $i: index($spriteList, $sprite); 
    $positi: nth($spriteCrop, $i); 
    $cx: nth($positi,1); 
    $cy: nth($positi,2); 
    $cw: nth($positi,3); 
    $ch: nth($positi,4); 
    .#{$sprite} { 
     @include sprite($cx , $cy, $cw , $ch); 
    } 
}