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>

这应该将参考图像和渐变组合为一个背景，以使它们正常工作。这行得通。

但如果我声明：

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

我会在浏览器尝试获取例如 "badge-attr(data-badge).png" 而不是 "badge-1.png" 时收到错误消息.

怎么了？如果我尝试通过纯 CSS 访问 attr(data-badge)（例如将其作为 ::after 伪元素中的内容），它会按预期显示“1”。

Answer 1

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