Madeas
@Madeas
UX/UI designer | Frontend developer

Как передать в цикл vue переменную scss?

Привет всем! Нужна помощь.

1. Есть набор SCSS переменных для экспорта

:export {
  dev : '#885AF8';
  des : '#885AF8';
}


2. Есть некий JSON (timeline), в котором прописан лейбл, соответствующий названию переменной

[
  {
    "label": "dev",
  },
  {
    "label": "des",
  }
]


3. Есть компонент VUE, который принимает JSON файл. Но он не содержит цвет (т.е. параметр l.color)
template
  ...
    v-timeline-item(v-for="(l, i) in timeline"
      :key="i"
      :color="l.color ? l.color : 'var(--page-color)'"


Вопрос. Как прописать связь между SCSS и JSON файлом и вывести всё во Vue компонент?

Двигаюсь пока в этом направлении:

vue component
import COLORS from '@/assets/sass/utils/_vars.scss';

const SCSS = {
  dev  : COLORS.dev,
  des  : COLORS.des,
}

  //- застрял тут

  computed: {
    labelColor() {
      return this.timeline
    }
  }


Что дальше писать? Компьютед свойство? Подскажите, как его правильно прописать?
По идее, решение должно быть вроде этого: SCSS.var = JSON.label

и в шаблоне тогда будет так:
:color="labelColor === l.label ? .............. : 'var(--page-color)'"


Скажите, правильно хоть двигаюсь?)) Кто может, поделитесь решением, пожалуйста.
  • Вопрос задан
  • 45 просмотров
Решения вопроса 1
Madeas
@Madeas Автор вопроса
UX/UI designer | Frontend developer
закрыт
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@HikariNoSekai
Middle Front-end Developer at Visata Systems LLC
Andrej Sharapov Сделать классы хелперы, которые используют переменные scss, и конкретно блокам в зависимости от условий, присваивать нужный класс. В ином случае вам прийдется дублировать цвет в json или константы глобальные js
Ответ написан
Ваш ответ на вопрос

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

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