Dynamically create scss variable in vuejs

Question

In my App.vue @mounted() I create an api request to get stuff for my Application. In a response-property "style" i get json with styles. Which lookes like this:

"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": ""
          }
        },

I would like to generate scss variables like:

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

and so on. In main.js I import styles.sass where a variables.scss is included too.

Question: Where and how can I define all these variables with JS in App.vue and pass it to styles.sass? thanks in advance =)

Harshal Patil · Accepted Answer · 2020-06-22 10:25:46Z

7

You cannot generate SCSS variables in JavaScript (more specifically, at browser side). SCSS is a compiler from SCSS to CSS. Even if you are importing SCSS file in your main.js, it is working due to Webpack/Rollup bundler are invoking SCSS compiler at build-time.

What you can do alternately is to create CSS custom properties (very similar to SCSS variables). In your CSS or SCSS, declare custom properties block like:

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

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

Then using the JavaScript or VUe component you can start setting these CSS custom properties:

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

answered Jun 22, 2020 at 10:25

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically create scss variable in vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related