我大约有196张国家国旗图像,每张图像均以其两个字母的国家/地区代码命名。我使用gulp.spritesmith npm包使用所有这些图像生成了一个精灵。它还会生成一个CSS文件(在我的情况下为一个CSS文件)以在我们的项目中引用它们。

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

/*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;
    }
    }


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

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

任何反馈或建议,我们将不胜感激。

谢谢。

最佳答案

首先,这里的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是由gulp.spritesmith在css文件中生成的列表的列表。

通过仅使用@include的这一行,我什至不必遍历国家列表。

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

非常感谢大家的评论,希望对其他尝试将gulp.spritesmith纳入其项目的人有所帮助。

干杯,
深圳

10-05 20:38
查看更多