title: Vue is it possible to use a prop for styling? (SCSS/ SASS)
body: <p>I am currently trying to allow for custom themeing of my component which uses bootstrap.
  I want to set its $primary tag in SCSS inside the  section of the Vue component for example currently my style looks like this:</p>
  
  <pre><code>&lt;style scoped lang="scss"&gt;
  $primary: #FF1493;
  // Bootstrap and its default variables
  @import "../../node_modules/bootstrap/scss/bootstrap";
  // BootstrapVue and its default variables
  @import "../../node_modules/bootstrap-vue/src/index.scss";
  
  @import "src/assets/custom.scss";
  &lt;/style&gt;
  </code></pre>
  
  <p>So I am looking for a way to have that hex code be customizable based on a prop the component recieves.
  Thanks for your help.</p>
  
  <p>Edit after input from a comment this was attempted and did not work:</p>
  
  <pre><code>&lt;template&gt;
   &lt;div style="style="{ '--test': #ff1493 }""&gt;
   &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style scoped lang="scss"&gt;
  $primary: var(--test);
  // Bootstrap and its default variables
  @import "../../node_modules/bootstrap/scss/bootstrap";
  // BootstrapVue and its default variables
  @import "../../node_modules/bootstrap-vue/src/index.scss";
  
  @import "src/assets/custom.scss";
  &lt;/style&gt;
  </code></pre>
  
  <p>Though leads the the following compile error in the SCSS:</p>
  
  <pre><code>SassError: argument `$color` of `darken($color, $amount)` must be a color
          on line 181 of node_modules/bootstrap/scss/_variables.scss, in function `darken`
          from line 181 of node_modules/bootstrap/scss/_variables.scss
          from line 9 of node_modules/bootstrap/scss/bootstrap.scss
          from line 201 of D:\Documents\Code\SiliconGit\src\components\SiDialog.vue
  </code></pre>