html - 使用符号名称调用类

Question

编辑:我想用 Jekyll 来实现它，据我所知，它没有 PHP、jQuery 等......

---

我有一个简单的 CSS 问题；它一定有一个简单的解决方案，但我就是找不到。

假设一个有多个 div 和一些类:

<div class="cat">
<div class="dog">
<div class="bird">
<div class="snake">
...

在 .css 中，我们想要设置这些“宠物”div 的样式；每个类(class)的风格都非常相似(例如，我们有一些照片 cat.jpg、dog.jpg... 并想展示它们)。这可以通过某种象征性的方法来实现吗？有点像

div.pet{
    width: 50px;
    height: 50px;
    background: url("/pictures/pet.jpg") no-repeat 0 0;
    ...

(但是没有 class="pet" 也没有 pet.jpg)

Answer 1

我会使用 sass:

div {
  $list: "cat", "dog", "frog";
  // generate classes for list elements
  @each $element in $list {
    &.#{$element} {
    background-image: url('images/#{$element}.jpg');
      }
    }
  }