用符号名称调用一个类 [英] Calling a class with symbolic name

问题描述

编辑：我想用Jekyll实现它，据我所知，它没有PHP，jQuery等等。

---

我有一个简单的CSS问题;它必须有一个简单的解决方案，但我只是没有找到它。

假设一个具有多个 div s与一些类：

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

以及 .css 我们要设计这些'宠物' div s;风格从班级到班级非常相似（例如，我们有一些照片 cat.jpg ， dog.jpg 。 ..并想展示他们）。这可以通过一种有点象征性的方法来实现吗？类似于

  div.pet {
 width：50px; 
 height：50px; 
 background：url（/ pictures / pet.jpg）no-repeat 0 0; 
 ... 
  

（但没有 class =宠物也不是 pet.jpg ）

解决方案

我会用sass：

  div {
 $ list：cat，dog，frog ; 
 //为列表元素生成类
 @ $ $ $元素在$ list {
&。＃{$ element} {
 background-image：url（'images / {$元件} .JPG'）; 
} 
} 
} 
  

EDIT: I would like to implement it with Jekyll, which (as far as I know) does not have PHP, jQuery, and so on...

---

I have a simple problem with CSS; it must have a simple solution but I just don't find it.

Suppose one has multiple divs with some classes:

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

and in a .css we want to style these 'pet' divs; the style is very similar from class to class (for instance we have some photos cat.jpg, dog.jpg... and want to show them). Can this be achieved by a somewhat symbolic method? Something like

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

(but there is no class="pet" nor pet.jpg)

解决方案

I would use sass:

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

这篇关于用符号名称调用一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！