0

I have a following situation with SASS:

.theme-blue > div {
  @include theme-gradient(get-badge-image("1"), #6699CC, #336699);
}

<div class="theme-blue"> <div data-badge="1">...</div> </div>

This should combine both referred image and gradient as one backgroudn in order to get them work properly. This works.

But if I declare:

.theme-blue > div {
      @include theme-gradient(get-badge-image(attr(data-badge)), #6699CC, #336699);
    }

I'll get an error where browser tries to fetch e.g "badge-attr(data-badge).png" instead of "badge-1.png".

What's going wrong? If I try to access attr(data-badge) via plain CSS (like having it as a content in ::after pseudo-element), it displays "1" as expected.

Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74

1 Answers1

1

SASS generates CSS, the get-badge-image() functions cannot access your data-attribute during compilation, because there is not HTML, you're still compiling the SASS.

Sandro Paganotti
  • 2,295
  • 16
  • 12