title: How can I use Sass variables with data attributes in HTML5
body: <p>I am trying to achieve a background color change when scrolling, so I need to use a <code>data-bg</code> attribute like this in my HTML markup:</p>
  <pre><code>&lt;div class=&quot;section&quot; data-bg=&quot;#ccff00&quot;&gt;
  </code></pre>
  <p>How can I use a SCSS/Sass variable instead of the Hex code? For example:</p>
  <pre><code>&lt;div class=&quot;section&quot; data-bg=&quot;$background-color&quot;&gt;
  </code></pre>
  <p>So when I change the variables this color also changes without having to change the HTML markup.</p>