使用样式绑定设置 scss 变量

Posted 2023-02-22

【中文标题】使用样式绑定设置 scss 变量

【英文标题】：Using style bind to set scss variables

【发布时间】：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 编译器。

【参考方案1】：

这可能对你有帮助

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

更新小提琴here

【讨论】：

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