title: Dynamically create scss variable in vuejs
body: <p>In my App.vue @mounted() I create an api request to get stuff for my Application.
  In a response-property &quot;style&quot; i get json with styles. Which lookes like this:</p>
  <pre><code>&quot;style&quot;: {
            &quot;general&quot;: {
              &quot;font-family&quot;: &quot;&quot;,
              &quot;font-color&quot;: &quot;&quot;,
              &quot;title_font_color&quot;: &quot;&quot;,
              &quot;h1_font_color&quot;: &quot;&quot;,
              &quot;background_color&quot;: &quot;&quot;,
              &quot;sale_background_color&quot;: &quot;&quot;,
              &quot;radius&quot;: &quot;&quot;
            },
            &quot;cta&quot;: {
              &quot;cta_color&quot;: &quot;&quot;,
              &quot;btn_font_color&quot;: &quot;&quot;,
              &quot;radius&quot;: &quot;&quot;,
              &quot;bar_background&quot;: &quot;&quot;,
              &quot;bar_font_color&quot;: &quot;&quot;
            },
            &quot;navigation&quot;: {
              &quot;normal_color&quot;: &quot;&quot;,
              &quot;normal_background_color&quot;: &quot;&quot;,
              &quot;focus_color&quot;: &quot;&quot;,
              &quot;focus_background_color&quot;: &quot;&quot;
            },
            &quot;floating_icons&quot;: {
              &quot;main_color&quot;: &quot;&quot;,
              &quot;phone_color&quot;: &quot;&quot;,
              &quot;mail_color&quot;: &quot;&quot;,
              &quot;whatsapp_color&quot;: &quot;&quot;
            }
          },
  </code></pre>
  <p>I would like to generate scss variables like:</p>
  <pre><code>$general_font_family: font-family;
  $general_font_color: font-color;
  </code></pre>
  <p>and so on.
  In main.js I import styles.sass where a variables.scss is included too.</p>
  <p>Question: Where and how can I define all these variables with JS in App.vue and pass it to styles.sass?
  thanks in advance =)</p>