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;
}

更新了小提琴here

使用style bind设置scss变量

1 个答案: