I am trying to achieve a background color change when scrolling, so I need to use a `data-bg` attribute like this in my HTML markup:

```
<div class="section" data-bg="#ccff00">

```

How can I use a SCSS/Sass variable instead of the Hex code? For example:

```
<div class="section" data-bg="$background-color">

```

So when I change the variables this color also changes without having to change the HTML markup.