有没有办法将 $ 附加到 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: "[=12=]a0";
        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 的每个国家/地区列表变量，应该会生成一个特定的 class 及其属性。我们如何做到这一点？我们需要遍历列表列表。

因此，我覆盖了spritemithm已经生成的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 纳入其项目的人有所帮助。

干杯，
深圳

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

Is there any way to append $ to a variable in sass?

css

sass

gulp-spritesmith