title: Overriding Sass mixin in view template dynamically
body: <p>I've defined a Sass <code>mixin</code> and used it in a class styling. I'm using the class in template. I need to decide the color on runtime. So I'm trying to override <code>mixin</code>. But its showing in <code>#ff0000</code> the color I defined in mixin initially.</p>
  
  <p>For some reason I <code>can't use an extra class</code>, What could be the best solution in this scenerio.</p>
  
  <p>My stylesheet <code>app.scss</code></p>
  
  <pre><code>@mixin mx-color {
    color: #ff0000;
  }
  .my-color {
  @include mx-color;
  }
  </code></pre>
  
  <p>Angular template view <code>app.html.haml</code></p>
  
  <pre><code>:css
    @mixin mx-color {
    color: {{custom_color}}; // custom_color contains hex-color to replace
   }
  %body
    %p.my-color
      This text must show-up in custom color but its showing the default color.
  </code></pre>