用符号名称调用一个类 [英] Calling a class with symbolic name
问题描述
我有一个简单的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 div
s 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' div
s; 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屋!