Variieren Sie eine CSS-Klasse?

Question

Mögliche Duplizieren:
Avoiding repeated constants in CSS

Ich möchte eine Klasse innerhalb einer Klasse gehören - ein bisschen wie eine Klasse variablizing - so dass ich etwas einmal definieren und im gesamten Blatt verwenden . Wenn ich die Farbe ändere, ändert sich alles.

.myFontColor{color:blue;} 
.myTitle{font-size:large; myFontColor} 
.myHeader{font-weight:bold; myFontColor} 

Die einzige Möglichkeit, die ich sehe, ist dies. Um jeden Klassennamen in die Definition aufzunehmen, aber wenn ich 20 oder 30 Elemente im Blatt habe, die sich auf diese Farbe beziehen, wird es sehr schnell hässlich.

oder um eine jede Klasse aufzulisten, wenn ich ein Element erstellen, das auch ein wenig unordentlich wird.

<div class="myFontColor myTitle myHeader"> 

Danke für Ihre Hilfe.

Answer 1

Die einzige Möglichkeit, die ich mir vorstellen kann, würde Javascript verwenden, um die Attribute dynamisch zuzuweisen. Erstellen Sie beispielsweise eine Liste aller Attribute, die Sie konfigurieren möchten (z. B. color, font-size, font-weight), und eine Liste aller Klassen, die Sie konfigurieren möchten (z. B. .myHeader, myTitle usw.). Dann tun Sie etwas wie folgt aus:

for (x=0; x< cssClasses.length; x++) 
{ 
    addAttribs(cssClasses[x]); 
} 

function addAttribs(class) 
{ 
    $("." + class).css("color","#444"); 
    $("." + class).css("font-weight","bold"); 
    //And so on.. 
} 

Dies kann in der Nähe Sie bekommen können, und es wird den Vorteil, alle Attribute in einer Funktion gespeichert haben, also wenn Sie es dort ändern wird es überall aktualisiert werden.

Edit: By the way, verwende ich Jquery in der addAttribs() Funktion, um einfach zugreifen und setzen Sie die CSS-Attribute.

Answer 2

Variablen (wie Sie sie brauchen) sind in CSS zu diesem Zeitpunkt nicht möglich. Sie müssten die Kaskade wie Sie verwenden und alle Klassen in die Definition aufnehmen.

Answer 3

Sie können mehrere Klassen schreiben, wenn ein Element zu definieren:

<div class="blue w210pt"> 
</div> 
<p class="green w210pt"> 
</p> 

<style> 
.green{color:green;} 
.blue{color:blue;} 
.w210pt{width:210px;} 
</style> 

Answer 4

Sie können einen Blick auf Sass nehmen wollen, etwas von der Rails-Community, die Sie eine etwas andere Syntax verwenden, macht aber erlaubt für einige Smarts wie Dies. Wenn Sie nicht die Ruby/Rails-Sache machen, können Sie immer noch Sass als Kommandozeilen-Präprozessor verwenden, um Ihre Sass-Dateien in CSS zu übersetzen.

Answer 5

Wie Sie vermuten, können Sie nicht tun, was Sie direkt beschreiben - Sie müssen den Cascading-Aspekt von CSS verwenden, um zu bekommen, was Sie wollen. Ich denke jedoch, dass Sie CSS zu einem gewissen Grad missbrauchen. Sie sollten Semantik definieren und dann Ihre Präsentation mit dieser Semantik verbinden. Wenn Sie zum Beispiel eine Klasse wie .myFontColor sehen, wäre das ein großer Hinweis, dass Sie nicht wirklich Klassen verwenden, um Semantik darzustellen (obwohl ich erkenne, dass dies wahrscheinlich für das Beispiel vereinfacht ist).

Answer 6

Die einfachste Lösung, Deklarationen nicht zu wiederholen, besteht darin, einige Klassen zu kombinieren, wie Sie wissen.

Vielleicht suchen Sie nach css variables?

Answer 7

Sie können auch eine serverseitige Lösung wie PHP (oder eine andere, auf die Sie Zugriff haben) verwenden.

Mit php speichern Sie das Stylesheet als PHP-Datei, die bei jeder Anforderung "ausgeführt" wird. Sie könnten alle Ihre Variablen oben setzen und sie dort wiederholen, wo Sie sie brauchen.

Der Browser sieht ein normales Stylesheet, aber der Server hätte etwas mehr zu tun. Und es verbessert nicht wirklich die Lesbarkeit des Stylesheets ...

Keine sehr elegante Lösung, aber es funktioniert.

Answer 8

Eine Lösung ist ein PHP-Sheet zu verwenden:

<? 
header('Content-type: text/css'); 

$color1 = '#123456'; 

echo <<<EOS 

.myTitle {color: $color1} 

EOS; 
?>