title: I need to use all color without the need of defining each color specifically in the sass file
body: <p>the dev of the template I'm using defined a specific data-colors but I need to use all-colors so I'm asking if there's a way which I can give only the Hex code and it changes the background </p>
  
  <p>scss file that defines colors : </p>
  
  <pre><code>$violet-color : rgb(127, 10, 236) !default ;
  $info-color : rgb(0,0,200) !default ; 
  ..
  </code></pre>
  
  <p>scss file : </p>
  
  <pre><code>&amp;[data-color="blue"] {
      @include sidebar-color($info-color);
    }
    &amp;[data-color="green"] {
      @include sidebar-color($success-color);
    }
    &amp;[data-color="orange"] {
      @include sidebar-color($orange-color);
    }
    &amp;[data-color="red"] {
      @include sidebar-color($danger-color);
    }
    &amp;[data-color="yellow"] {
      @include sidebar-color($warning-color);
    }
    &amp;[data-color="violet"] {
      @include sidebar-color($violet-color) ; 
    }
    &amp;[data-color="DA3"] {
      @include sidebar-color($DA3) ; 
    }
  </code></pre>
  
  <p>HTML file : </p>
  
  <pre><code> &lt;div className="sidebar"  data-color="blue" &gt;
  &lt;/div&gt;
  
  </code></pre>