使用样式绑定设置 scss 变量答案

【问题标题】：Using style bind to set scss variables使用样式绑定设置 scss 变量
【发布时间】：2018-10-27 05:26:44
【问题描述】：

我有一个 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/

【问题讨论】：

您应该考虑使用 css 类，而不是添加内联样式，并更改它而不是内联样式。
@Adriano 我一直在尝试类似的方法，但无法找到更改变量的方法：jsfiddle.net/801nd1vy/2
不可能。 SCSS 是供 Sass 编译器读取的。您不能将模板/Javascript 中的值从 Vue 传递到 Sass 编译器。

标签： css vue.js sass vuejs2

【解决方案1】：

这可能对你有帮助

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

更新小提琴here

【讨论】：

感谢您的回复，不幸的是它不起作用。该变量仅针对该 p 标签设置，这与拥有全局变量的原因背道而驰。我在下面的小提琴中演示过：jsfiddle.net/50wL7mdz/335389