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

Question

我有几个使用不同背景图像的不同模板。虽然我知道我可以内联背景图片或创建多个 classes 以使用不同的背景图片 — 我正在努力发挥创造力，同时让我的生活更轻松。这是我的目标:

1. 在 HTML div 中，我想设置一个名为 background 的 css var 或 data-attribute保存图像名称。例如:

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

或(我认为这是不可能的)

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

1. 使用该图像名称来执行类似的操作:尝试了以下代码，我知道这行不通，我只是想看看这样的操作是否可行。

// 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));
}

不确定如果没有 JS 是否可行，我只是觉得这样做会很酷!寻找使用 SCSS 和 CSS 的任何解决方案。

Answer 1

也许你可以有一个带有数组的 SCSS 依赖文件，它将 [data-attr=""] 元素映射到 background-image 属性。但这可能不是让生活更轻松的解决方案。

您使用什么SCSS -> CSS 编译器？如果将其包装在 grunt 任务运行程序中，则可以扫描 html 文件以获取特定数据属性，并在触发编译本身之前将值包含到依赖项中。