Как получить доступ к переменным s css в машинописи

Question

Я хотел создать объект, и он создаст элемент HTML. Здесь мне нужно указать цвет, цвет фона, границу для этого объекта.

Вместо жесткого кодирования всех этих значений, я хотел получить их из S CSS.

Я попробовал это Кстати, и это работает. Не уверен, что это правильный способ сделать или нет. Итак, ищем идеальное решение

S CSS пример кода:

:root {
    --normal-rate: #00008b;
    --special-rate : #80d4ff;
    --flat-rate : #F7941D;
}

Машинописный код:

this.normalRate = window.getComputedStyle(document.documentElement).getPropertyValue("--normal-rate");
this.specialRate = window.getComputedStyle(document.documentElement).getPropertyValue(RateColor.SpecialRate);
this.flatRate = window.getComputedStyle(document.documentElement).getPropertyValue(RateColor.FlatRate);

this.obj= [
        { title: '', allDay: false,..., backgroundColor: this.specialRate, borderColor: this.specialRate },
        { title: '', allDay: false,..., backgroundColor: this.normalRate, borderColor: this.normalRate },
        { title: '', allDay: false,..., backgroundColor: this.flatRate, borderColor: this.flatRate }
      ];