有沒有辦法將$追加到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); 
} 

在我的項目中，我創建了一個覆蓋上面生成的sprite mixin的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; 
} 
} 

但是，在上面的實施，我想通過給定的值列表（廣告和AE）作爲變量（即$廣告和$ AE），在每個循環中。

你可能會說，爲什麼你不能只是有國家名單如下：

$country-list: $ad $ae; 

這是因爲，$廣告和$ 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-精靈是由吞氣生成的列表清單。 spritesmith在css文件中。

通過，簡單地使用@include這一行，我甚至不必遍歷國家列表。

即將插入，#{}用於強制變量爲字符串。儘管當我使用它的時候，輸出將是變量的相似之處，但它仍然是一個字符串。因此，#{}在這種情況下不起作用。

非常感謝大家的評論，我希望這可以幫助那些嘗試將gulp.spritesmith整合到他們的項目中的人。

乾杯，
SZ