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

Ich habe auch wie verrückt danach gesucht und bin nur durch Ausprobieren auf die Lösung gekommen :P... Na ja, man kann es auch so machen:

composite.something, composite.else
{
    blblalba
}

Bei mir hat es plötzlich funktioniert :)

Answer 2

Less und Sass sind CSS-Präprozessoren, die die CSS-Sprache auf wertvolle Weise erweitern. Eine der vielen Verbesserungen, die sie anbieten, ist genau die Option, nach der Sie suchen. Es gibt einige sehr gute Antworten mit Less und ich werde Sass Lösung hinzufügen.

Sass verfügt über die Option extend, mit der eine Klasse vollständig auf eine andere erweitert werden kann. Mehr über extend können Sie lesen in diesem Artikel

Answer 3

Ich denke, dass dies eine bessere Lösung ist:

[class*=“button-“] {
  /* base button properties */
}
.button-primary { ... }
.button-plain { ... }

Answer 4

Wem die genannten (ausgezeichneten) Beiträge nicht genügen, der kann seine Programmierkenntnisse nutzen, um eine Variable zu erstellen (PHP oder was auch immer) und darin die verschiedenen Klassennamen zu speichern.

Das ist der beste Hack, der mir eingefallen ist.

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

Dann wenden Sie die globale Variable auf das gewünschte Element an und nicht auf die Klassennamen selbst

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

Answer 5

CSS ist nicht wirklich tun was Sie fragen. Wenn Sie Regeln mit dieser zusammengesetzten Idee im Hinterkopf schreiben wollen, sollten Sie sich Folgendes ansehen Kompass . Es handelt sich um ein Stylesheet-Framework, das dem bereits erwähnten Less ähnlich ist.

Man kann damit Mixins und all diese guten Dinge tun.