在 vuejs 中动态创建 scss 变量答案

【问题标题】：Dynamically create scss variable in vuejs在 vuejs 中动态创建 scss 变量
【发布时间】：2020-06-22 18:25:46
【问题描述】：

在我的 App.vue @mounted() 中，我创建了一个 api 请求来为我的应用程序获取东西。在响应属性“样式”中，我得到带有样式的 json。看起来像这样：

"style": {
          "general": {
            "font-family": "",
            "font-color": "",
            "title_font_color": "",
            "h1_font_color": "",
            "background_color": "",
            "sale_background_color": "",
            "radius": ""
          },
          "cta": {
            "cta_color": "",
            "btn_font_color": "",
            "radius": "",
            "bar_background": "",
            "bar_font_color": ""
          },
          "navigation": {
            "normal_color": "",
            "normal_background_color": "",
            "focus_color": "",
            "focus_background_color": ""
          },
          "floating_icons": {
            "main_color": "",
            "phone_color": "",
            "mail_color": "",
            "whatsapp_color": ""
          }
        },

我想生成 scss 变量，例如：

$general_font_family: font-family;
$general_font_color: font-color;

等等。在 main.js 中，我导入了 styles.sass，其中还包含了 variables.scss。

问题：我在哪里以及如何在 App.vue 中使用 JS 定义所有这些变量并将其传递给 styles.sass？在此先感谢 =)

【问题讨论】：

标签： vue.js sass vuejs2

【解决方案1】：

您不能在 JavaScript 中生成 SCSS 变量（更具体地说，在浏览器端）。 SCSS 是一个从 SCSS 到 CSS 的编译器。即使您在 main.js 中导入 SCSS 文件，由于 Webpack/Rollup 捆绑程序在构建时调用 SCSS 编译器，它也可以正常工作。

您可以交替做的是创建CSS custom properties（非常类似于SCSS 变量）。在您的 CSS 或 SCSS 中，声明自定义属性块，如：

:root {
  /* default value */
  --general-font-family: serif;
}

div {
  /* default value */
  --general-font-color: brown;
}

然后使用 JavaScript 或 VUe 组件，您可以开始设置这些 CSS 自定义属性：

mounted() {
    // Ensure that you have proper reference to HTMLElement
    element.style.setProperty('--general-font-family', 'sans-serif');
}

【讨论】：