Как передать в свойство SASS переменную, название которой в переменной JS?

Question

[MrDeners]

const props = defineProps({
  backgroundColor: { type: String, default: '$light-paragraph-color' }
});

Представлен код на TS, где получаем props из родительского компонента (Vue.js). По умолчанию в переменную backgroundColor записывается значение $light-paragraph-color'.

.wrapper
  height: 100%
  width: 100%
  background-color: var(--backgroundColor)

В этом участке кода пытаюсь преобразовать значение переменной backgroundColor из строки в sass переменную, однако цвет фона не изменяется.

Подскажите, как решить?

Answer 1

[Алекс Глебов]

Js работает в браузере, там нет никакого sass. Он компилируется и идет в браузер в виде css.

Вам нужно определить css переменную в атрибуте style (через v-bind). Записать туда значение из js. Дальше в стилях использовать css переменную.

https://xhtml.ru/2021/javascript/sharing-data-betw...

Answer 2

[Kovalsky]

Строго говоря ответ уже дали - из коробки так не получится. Но если очень хочется, то технически возможностей реализаций уйма, sass-to-js например

Answer 3

[smmaxim]

Я наоборот из sass переменную подтягивал

_sass-theme.scss

$tab: 56rem;
$desk: 84.5rem;

// Переменные для экспорта
:export {
  tab: $tab;
  desk: $desk;
}

breakpoints.js

import variables from '@ui/_sass-theme.scss'

export const mediaQueryBreakpoints = {
  tab: parseFloat(variables.tab),
  desk: parseFloat(variables.desk),
}