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

匹配2个列表条目，其中一个包含2个变量

1 个答案: