Получить данные из HTML для использования с SCSS / CSS

Question

У меня есть несколько разных шаблонов, которые используют разные фоновые изображения. Хотя я знаю, что могу встроить фоновое изображение или создать несколько classes, чтобы использовать разные фоновые изображения - я стараюсь быть креативным, облегчая свою жизнь. Вот к чему я стремлюсь:

1. В HTML div я бы хотел установить css var или data-attribute с именем background, который содержит имя изображения. Так, например:

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

Не уверен, что это возможно без JS, я просто думаю, что это было бы круто! Ищете любые решения, использующие SCSS и CSS.

Answer 1

Может быть, у вас может быть файл зависимостей SCSS с массивом, который будет отображать элементы [data-attr=""] в свойство background-image. Но это, вероятно, не упрощенное решение.

Какой SCSS -> CSS компилятор вы используете? Если вы поместите его в обработчик заданий, вы можете просканировать html-файлы на предмет определенных атрибутов данных и включить значения в зависимость, прежде чем запускать саму компиляцию.