匹配2個列表條目，其中一個包含2個變量

Question

所以我有2個列表。

$ spriteList： mario，goomba，spike，coinbox;

$ spriteCrop： （-80px，1px的），（-480px，1px的），（-640px，1px的），（-800px，1px的）;

我需要的輸出：

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

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

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

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

這是我使用的mixin：

@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); 
    } 
}