title: How do I pass an HTML `data-` string attribute into a SCSS mixin via attr()?
body: <p>I am trying to set up a color scheme in SCSS where I can have the following HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="swatch" data-bg="green"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>I have a SCSS mixin defined as such:</p>
  
  <pre><code>@function color($key: 'black') {
    @return map-get($colors, $key);
  }
  </code></pre>
  
  <p>So, if I pass it <code>background-color: color('green')</code>, it will look at the <code>$colors: ( ... )</code> map, see <code>'green': #009900,</code> and return <code>background-color: #009900;</code> as the CSS.</p>
  
  <p>The problem comes when I try to pass the <code>data-bg</code> attribute value into the <code>color()</code> SCSS mixin, like so:</p>
  
  <pre><code>.swatch[data-bg] {
    background-color: color(attr(data-bg));
  }
  </code></pre>
  
  <p>This doesn't work. I would <em>expect</em> it to parse the value as such:</p>
  
  <p><code>color(attr(data-bg))</code> → <code>color('green')</code> → <code>#009900</code></p>
  
  <p>However, SCSS won't even render that <code>background-color</code> line in the CSS at all.</p>
  
  <p>I have a Codepen where you can see what I'm trying to go for. It's the "Brown" color swatch here: <a href="https://codepen.io/rbrum/pen/axZLxw" rel="nofollow noreferrer">https://codepen.io/rbrum/pen/axZLxw</a></p>
  
  <p>Any help would be greatly appreciated.</p>