Kann eine CSS-Klasse eine oder mehrere andere Klassen erben?

Question

Ist es möglich, eine CSS-Klasse zu erstellen, die von einer anderen CSS-Klasse (oder mehreren) "erbt".

Nehmen wir zum Beispiel an, wir hätten:

.something { display:inline }
.else      { background:red }

Ich würde gerne etwas in dieser Art machen:

.composite 
{
   .something;
   .else
}

wo die Klasse ".composite" sowohl inline als auch mit rotem Hintergrund angezeigt würde

Answer 1

Es gibt Tools wie LESS die es Ihnen ermöglichen, CSS auf einer höheren Abstraktionsebene zusammenzustellen, ähnlich wie Sie es beschreiben.

Less nennt diese "Mixins"

Anstelle von

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Man könnte sagen

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Answer 2

Sie können mehrere Klassen zu einem einzigen DOM-Element hinzufügen, z. B.

<div class="firstClass secondClass thirdclass fourthclass"></div>

Regeln, die in späteren Klassen angegeben sind (oder die spezifischer sind), haben Vorrang. So wird die fourthclass in diesem Beispiel gewissermaßen überwiegt.

Die Vererbung ist nicht Teil des CSS-Standards.

Answer 3

Ja, aber nicht genau mit dieser Syntax.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Answer 4

Halten Sie Ihre gemeinsamen Attribute zusammen und weisen Sie spezifische Attribute zu (oder setzen Sie sie außer Kraft).

/*  ------------------------------------------------------------------------------ */   
/*  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;
}

Answer 5

El SCSS für das gegebene Beispiel wäre das etwa so:

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

Mehr Informationen, siehe Sass-Grundlagen