从html检索数据以与SCSS/CSS一起使用

我有几个使用不同背景图像的不同模板。虽然我知道我可以内联背景图像或创建多个

类

来使用不同的背景图像，但我正在努力发挥创造力，同时让我的生活更轻松。以下是我的目标：

在

HTML div

中，我想设置一个名为

background

的

css var

或

data属性，该属性保存图像名称。例如：

---

不确定如果没有JS这是可能的，我只是觉得这样做会很酷！寻找使用

SCSS

和

CSS

的任何解决方案，也许您可以拥有一个带有数组的SCSS依赖项文件，该文件将

[data attr=”“]

元素映射到

背景图像

属性。但这可能不是让生活变得更容易的解决办法

---

您使用什么

SCSS->CSS

编译器？如果将其包装在grunt task runner中，则可以扫描html文件以查找特定的数据属性，并在触发编译本身之前将值包含到依赖项中。

您可以接近，但遗憾的是，目前对除内容以外的任何内容的支持都很少。对于当前的浏览器，我相信您将需要一些javascript。在运行时如何实现这一点令人困惑吗？在呈现HTML后是否可以重新编译SCS？仅限CSS？不可能-除了

内容

属性外，没有字符串连接。您可以在SCSS中非常干净地完成这项工作，但对于每个元素/图像，它仍然可以转换为单独的CSS行。另外，您的上一个SCSS示例将不可能实现，因为您正试图将CSS变量（在浏览器运行时确定）应用到SCSS混合（在CSS编译之前在开发中解决）中。啊，这是一个多么好的主意！！

<div class="bg-image" style="--background: 'image-name'"></div>

<div class="bg-image" data-attr="image-name"></div>

// tried this
background-image: url("../images/"var(--background)".jpg");

// also tried this, which I think essentially does the same thing
@mixin form-bg-image($slug) {
  background-image: url("../images/#{$slug}.jpg");
}

.bg-image {
  @include form-bg-image(var(--background));
}