Madeas
@Madeas
UI / UX Designer, Frontend Developer & Unicorn

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

День добрый!
Подскажите, как реализовать миксин или функцию при условии:

1. есть несколько scss переменных у которых меняется только окончание:
$var1 = #333
$var5 = #111
$var100 = #222
...
...
...

2. есть несколько дивов с такими же айдишниками:
div id="var1"
div id="var5"
div id="var100"
...
...
...

Нужно построить миксин/функцию, чтобы цвет текста в диве соответствовал переменной.
Чтобы не писать значения каждому диву по отдельности
  • Вопрос задан
  • 97 просмотров
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Кто же вас заставлял создавать кучу однотипных переменных, если для этого существуют массивы? Или, в терминологии sass - мапы.

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

@each $index, $color in $colors {
  #var#{$index} {
    color: $color;
  }
}
Ответ написан
@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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы