Использование привязки стилей для установки переменных scss

Question

У меня есть компонент Vue, который я хочу стилизовать, используя переданные ему свойства.

В конечном итоге я хочу установить свои глобальные переменные scss в зависимости от цвета, передаваемого компоненту.

Я создал упрощенную версию того, что пытаюсь сделать, но :style не устанавливает переменную так, как я надеюсь.

Можно ли это сделать / как мне это сделать?

<template>
  <div id="app">
    <p :style="{ $backgroundColor: 'green' }">{{ message }}</p>
  </div>
</template>

<style>
  $backgroundColor: red;

  p {
    background: $backgroundColor;
  }

</style>

https://jsfiddle.net/50wL7mdz/335379/

Answer 1

Это может помочь вам

$backgroundColor: red !default;
p {
  $backgroundColor: green; // you can set any color here
  background: $backgroundColor;
}

обновленная скрипка здесь