时间戳

首页 > 解决方案 > 在 vuejs 中动态创建 scss 变量

vue.js - 在 vuejs 中动态创建 scss 变量

问题描述

在我的 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.jssassvuejs2

解决方案

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

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

: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');
}

推荐阅读