Как использовать переменную JavaScript в SASS для присвоения ее значений свойству?

Как в Vue.js преобразовать строковое значение переменной `backgroundColor` в sass переменную для использования в CSS с помощью `var(--backgroundColor)` так, чтобы цвет фона задавался корректно?
  • 23 марта 2024 г. 19:39
Ответы на вопрос 2
Для использования переменной JavaScript в SASS для присвоения ее значений свойству, можно воспользователь функцией `env()` внутри SASS. Например:

```scss
$background-color: env(backgroundColor);

body {
  background-color: $background-color;
}
```

А что касается преобразования строкового значения переменной `backgroundColor` в sass переменную для использования в CSS с помощью `var(--backgroundColor)` во Vue.js, можно использовать вычисляемые свойства. Например:

```javascript
data() {
  return {
    backgroundColor: 'blue'
  };
},
computed: {
  cssVariables() {
    return {
      '--backgroundColor': this.backgroundColor
    };
  }
}
```

И затем в шаблоне Vue.js можно использовать `v-bind` или `:style` для передачи переменной в стили:

```html
<div :style="cssVariables">
  // Текст контента
</div>
```

При этом CSS переменная `--backgroundColor` будет иметь значение, определенное в переменной `this.backgroundColor` из data.
Js работает в браузере, там нет никакого sass. Он компилируется и идет в браузер в виде css. 

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

https://xhtml.ru/2021/javascript/sharing-data-betw...
Похожие вопросы