title: vue.js - bind sass styling from one component to another
body: <p>this question is about vue.js, that operates on a boilerplate that using webpack configuration.</p>
  
  <p>i need to dynamically pass sass variables from component <code>father</code> to component <code>son</code> (for the simplicity of naming).</p>
  
  <p>on component <code>father</code> i have access to <code>$color</code> variable from the style tag.
  and i'm calling to <code>son</code> component using this html template:</p>
  
  <pre><code>// father component
      &lt;template&gt;
          &lt;son&gt;&lt;/son&gt;
      &lt;/template&gt;
      &lt;style lang='sass' scoped&gt;
          @import 'assets/sass/color';
      &lt;/style&gt;
  </code></pre>
  
  <p>imported sass variable, <code>$color</code> need to come from <code>father</code> and change the background of <code>son</code></p>
  
  <p>let's say son is just a simple div.</p>
  
  <pre><code>// son component
      &lt;template&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/template&gt;
  
      &lt;style lang=sass scoped&gt;
          div {
              width: 200px;
              height: 200px;
          }
      &lt;/style&gt;
  </code></pre>
  
  <p>what's the correct way to do it?</p>