是否可以创建一个从另一个CSS类(或多个)“继承”的CSS类。
例如,假设我们有:
.something { display:inline }
.else { background:red }
我想做的是:
.composite
{
.something;
.else
}
其中“.composite”类将显示为内联,并具有红色背景
是否可以创建一个从另一个CSS类(或多个)“继承”的CSS类。
例如,假设我们有:
.something { display:inline }
.else { background:red }
我想做的是:
.composite
{
.something;
.else
}
其中“.composite”类将显示为内联,并具有红色背景
当前回答
完美的时机:我从这个问题转到了我的电子邮件,找到了一篇关于Less的文章,这是一个Ruby库,除其他外,它还做了以下工作:
由于super看起来就像页脚,但字体不同,所以我将使用Less的类包含技术(他们称之为mixin)来告诉它也包含这些声明:
#super {
#footer;
font-family: cursive;
}
其他回答
一个元素可以包含多个类:
.classOne { font-weight: bold; }
.classTwo { font-famiy: verdana; }
<div class="classOne classTwo">
<p>I'm bold and verdana.</p>
</div>
不幸的是,这几乎和你会得到的一样接近。我希望有一天能看到这个特性以及类别名。
看看CSS合成:https://bambielli.com/til/2017-08-11-css-modules-composes/
根据他们的说法:
.serif-font {
font-family: Georgia, serif;
}
.display {
composes: serif-font;
font-size: 30px;
line-height: 35px;
}
我在我的反应项目中使用它。
您可以向单个DOM元素添加多个类,例如。
<div class="firstClass secondClass thirdclass fourthclass"></div>
后面的类(或更具体的类)中给出的规则将覆盖。所以这个例子中的第四类占了上风。
继承不是CSS标准的一部分。
将常用属性放在一起,然后再次指定特定(或覆盖)属性。
/* ------------------------------------------------------------------------------ */
/* Headings */
/* ------------------------------------------------------------------------------ */
h1, h2, h3, h4
{
font-family : myfind-bold;
color : #4C4C4C;
display:inline-block;
width:900px;
text-align:left;
background-image: linear-gradient(0, #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}
h1
{
font-size : 300%;
padding : 45px 40px 45px 0px;
}
h2
{
font-size : 200%;
padding : 30px 25px 30px 0px;
}
给定示例的SCSS方式如下:
.something {
display: inline
}
.else {
background: red
}
.composite {
@extend .something;
@extend .else;
}
更多信息,请查看sass基础知识