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

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，我什至不必遍历国家/地区列表。

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

非常感谢大家的 cmets，我希望这可以帮助其他尝试将 gulp.spritesmith 纳入他们的项目的人。

干杯，
深圳