SASS误解了attr（data-something）

Question

SASS有以下情况：

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

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

这应该将引用的图像和渐变结合为一个backgroudn，以使它们正常工作。这很有效。

但如果我宣布：

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

我会在浏览器尝试获取错误，例如＆＃34; badge-attr（数据徽章）.png＆＃34; 而不是＆＃34;徽章1.png＆＃34;

出了什么问题？如果我尝试通过纯CSS访问attr（数据标记）（比如将它作为伪后元素中的内容），它会显示＆＃34; 1＆＃34;如预期的那样。

Answer 1

SASS生成CSS，get-badge-image()函数在编译期间无法访问您的数据属性，因为没有HTML，您仍在编译SASS。