关于scss变量拼接问题

Question

1.开发中遇到了关于变量拼接的问题：在scss中使用for循环展示gulp生成的雪碧图。
2.像这样：

@for $i from 0 through 88 {
  .emotion-#{ $i } {
    @include sprite();
    display: inline-block;
  }
}

3.我的问题是在sprite中的参数写的是$emotion-1，$emotion-2，$emotion-3......的格式，所以需要进行拼接，试过$emotion-#{$i}还有其他各种方法，只能查到参数是一个纯变量的例子，但是没有拼接的例子，希望大神指教

Answer 1

没明白。。。

Answer 2

#{$animal}表示变量，后面直接连接想要的字符串

//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

https://www.w3cplus.com/sassg...

Answer 3

$emotion-map: (
    0: $data0,
    1: $data1,
    // ...
);
@for $i from 0 through 88 {
  .emotion-#{$i} {
    @include sprite(map-get($emotion-map, $i}));
    display: inline-block;
  }
}

像这样吗？