Есть ли способ добавить $ к переменной в 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, который переопределяет вышеупомянутый сметный микс. Это выглядит следующим образом:

@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); 
    } 
} 

Когда я использую этот подмешать в моем проекте, я просто импортировать файл SCSS сгенерированный и включить этот подмешать. Ниже приводится реализация:

@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; 
} 
} 

Но, в такой реализации, я хочу передать данные значения списка (объявления и ая) в качестве переменных (то есть, $ объявления и $ ае) во время каждого цикла.

Вы можете сказать, почему вы не можете просто список стран, как следующее:

$country-list: $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

Во-первых, спрайт mixin здесь не принимает строки. Они принимают переменные. Следовательно, я попытался создать целый новый список из существующего списка, добавив $ к каждому элементу списка. Даже тогда конечный результат был строкой, но не переменной.

Через некоторое время я рассмотрел типы переменных, сгенерированных с помощью простой поправки. Это была строка. И переменная, которая была передана в mixin, была списком. Поскольку в строке есть только один элемент [Примечание: в SASS одна строка является неявным списком], всякий раз, когда я пытаюсь сделать nth($country, 9), он выдает ошибку индекса за пределами границ.

Итак, окончательный вывод из этого эксперимента - просто передать переменную списка в mixin.

Теперь для каждой переменной списка стран мы переходим к mixin, должен быть определенный класс, сгенерированный с его свойствами. как нам это сделать? Нам нужно просмотреть список списков.

Поэтому я переписал на подмешать уже порожденную spritesmith следующим образом:

@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