Как организовать mixin по айдишникам?

Question

[Andrej Sharapov]

Надо реализовать миксин или функцию при условии:

1. Есть несколько scss переменных у которых меняется только окончание:

$var1 = #333
$var5 = #111
$var100 = #222
...

2. Есть несколько дивов с такими же айдишниками:

<div id="var1">
<div id="var5">
<div id="var100">
...

Нужно построить миксин/функцию, чтобы цвет текста в диве соответствовал переменной.
Чтобы не писать значения каждому диву по отдельности.

Answer 1

[Сергей delphinpro]

Кто же вас заставлял создавать кучу однотипных переменных, если для этого существуют массивы? Или, в терминологии sass - мапы.

$colors: {
  1: #333,
  5: #111,
  100: #222,
}

@each $index, $color in $colors {
  #var#{$index} {
    color: $color;
  }
}

Comments

[Vann Damm]

подскажите пожалуйста , что это за синтаксис, какой язык？в "функции"

[Сергей delphinpro]

effect_tw, https://sass-lang.com/documentation

[Vann Damm]

Сергей delphinpro, благодарю

Answer 2

[Flying]

Ваша задача по сути сводится к динамическому обращению к переменным. Sass так не умеет. Для реализации вам необходимо сменить структуру данных и использовать maps.

Т.е. ваш код мог бы выглядеть как-то так:

$vars: (
  1 : #333,
  5 : #111,
  100 : #222,
);

@mixin div-color($id) {
  @if (map-has-key($vars, $id)) {
    color: map-get($vars, $id);
  }
}

Посмотреть в действии можно на Sassmeister.