Есть ли способ сопоставления с шаблоном с помощью sass или другого языка шаблонов CSS?

Question

Я бы хотел, чтобы изображения игральной карты отображались с помощью CSS.Но было бы замечательно, если бы существовал язык шаблонов, который мог бы установить такой стиль, как:

.playing-card-(.*) {
   width: 30px
   height: 40px
   background-image: "/images/cards/$1.gif"
}

Существует ли такая вещь?

Answer 1

Я бы хотел, чтобы это существовало, но там, где мне приходилось выполнять симулированные задачи, мне приходилось полагаться на серверную сторону, чтобы написать background-image как встроенный стиль, или использовать JS для этого (например, еслиЯ загружаю данные через AJAX).

Answer 2

Я не знаю, есть ли какая-нибудь технология CSS, которая сделает это за вас. Хотя это не идеально, вы можете использовать jQuery для этого:

Я бы начал с присвоения общего класса каждой карточке «карточкам», затем использовал бы jQuery для итерации по каждому элементу, назначив соответствующий CSS элементу.

$('.cards').each(function(index,element) {
  $(element).css('background-image','url(images/cards/'+index+'.gif)');
});