Question

我有大约196张国家标志图像，每张图片都以其两个字母的国家代码命名。我使用gulp.spritesmith npm包生成了包含所有这些图像的精灵。它还会生成一个css文件（在我的例子中是一个scss文件），以便在我们的项目中引用它们。

为简单起见，以下生成的代码是由于两个图像。

/*generated code*/
$ad-name: 'ad';
$ad-x: 0px;
$ad-y: 14px;
$ad-offset-x: 0px;
$ad-offset-y: -14px;
$ad-width: 19px;
$ad-height: 14px;
$ad-total-width: 19px;
$ad-total-height: 1932px;
$ad-image: 'locate-sprite.png';
$ad: (0px, 14px, 0px, -14px, 19px, 14px, 19px, 1932px, 'locate-sprite.png',    'ad', );
$ae-name: 'ae';
$ae-x: 0px;
$ae-y: 966px;
$ae-offset-x: 0px;
$ae-offset-y: -966px;
$ae-width: 19px;
$ae-height: 14px;
$ae-total-width: 19px;
$ae-total-height: 1932px;
$ae-image: 'locate-sprite.png';
$ae: (0px, 966px, 0px, -966px, 19px, 14px, 19px, 1932px, 'locate-sprite.png', 'ae', );
$spritesheet-sprites: ($ad, $ae,);
$spritesheet: (19px, 1932px, 'locate-sprite.png', $spritesheet-sprites, );

@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

在我的项目中，我创建了一个mixin，它覆盖了上面生成的sprite mixin。具体如下：

@mixin blah($sprite){
    &:before{
        display: inline-block;
        content: "\00a0";
        position: relative;
        vertical-align: middle;
        top: -2px;
        @include sprite-image($sprite);
        @include sprite-position($sprite);
        @include sprite-width($sprite);
        @include sprite-height($sprite);
    }
}

当我在我的项目中使用这个mixin时，我只是导入生成的scss文件并包含这个mixin。以下是实施：

@import "_gen.sprite";

$country-list: ad ae;
@each $current-country in $country-list {
  .imageflag-#{$current-country}{
       @include blah($ad); // This works
       @include blah($current-country); //This doesn't because, a string is passed instead of a variable. 
       margin-right: 10px;
}
}

但是，在上面的实现中，我想在每个循环期间将给定的列表值（ad和ae）作为变量（即$ ad和$ ae）传递。

您可能会说，为什么不能将国家/地区列表如下所示：

$country-list: $ad $ae;

我不能这样做，因为$ ad和$ ae值已经由scss文件中的插件生成，并且相当于一个无法传递到mixin的值，因为它会再次引发错误。期望变量不是字符串。

所以，我想到了使用插值。所以，我做了以下几点：

$dollar: '$';
$country-list: ad ae;
@each $current-country in $country-list {
      .imageflag-#{$current-country}{
           @include blah(#{$dollar}#{$current-country}); //expected $ad and $ae but throws an error. 
           margin-right: 10px;
    }
    }

但插值并不适用于美元。我无法将美元附加到字符串变量。

那么，是否有其他方法可以将美元符号插入或附加到变量或字符串以实现所需的输出。

非常感谢任何反馈或建议。

谢谢。

Answer 1

首先，sprite mixin在这里不接受字符串。他们接受变量。因此，我尝试通过将$附加到每个列表项来从现有列表创建一个全新的列表。即便如此，最终结果是一个字符串，但不是一个变量。

过了一会儿，我看了一下用简单修改生成的变量的类型。这是一个字符串。传递给mixin的变量是一个列表。因为字符串中只有一个单项[注意：在SASS中，单个字符串隐式地是一个列表]，每当我尝试执行nth($country, 9)时，它都会抛出一个超出范围的索引错误。

因此，该实验的最终结论只是将列表变量传递给mixin。

现在，对于我们传递给mixin的每个国家/地区列表变量，应该有一个使用它的属性生成的特定类。我们如何做到这一点？我们需要遍历列表列表。

因此，我覆盖了spritesmith已经生成的mixin如下：

@mixin sprites-loop($sprites) {
    @each $sprite in $sprites {
        $sprite-name: nth($sprite, 10);
        .iss-flag-#{$sprite-name} {
            @include sprite($sprite);
            margin-right: 5px;
        }
    }
}

用法：

@include sprites-loop($spritesheet-sprites);

$ spritesheet-sprites是由css文件中的gulp.spritesmith生成的列表列表。

通过简单地使用@include的这一行，我甚至不必遍历国家/地区列表。

进行插值时，#{}用于将变量强制转换为字符串。即使我在使用它时思考，输出也是变量的相似之处，它仍然是一个字符串。因此，#{}在这种情况下不起作用。

非常感谢大家的评论，我希望这有助于其他尝试将gulp.spritesmith纳入其项目的人。

干杯，
SZ

有没有办法将$附加到sass中的变量？

1 个答案: