Kann ich eine benutzerdefinierte Farbdefinition erstellen, die ich zwischen CSS, JS und HTML austauschen kann?

Question

Ich habe eine bläuliche Farbe, die ich an vielen Stellen in meiner App verwenden möchte, und im Moment kopiere ich sie und füge sie zwischen Stilen in meinem CSS ein. Gibt es eine Möglichkeit, eine Konstante wie die Standardfarben, "blau", "rot" usw. zu definieren, die ich zwischen meinem CSS, meinem HTML und meinem JS teilen könnte?

Ich würde gerne sagen können (irgendwo, vorzugsweise CSS)

myblue = #33CC99

in CSS sagen...

background-color:myblue;

in HTML sagen...

<td color="myblue"/>

und in JavaScript

tag.style.backgroundColor = myblue;

Ich vermute, dass dies unmöglich ist und Google hat nichts ergeben, also hat jemand eine Idee? Ich bezweifle, dass ich die einzige Person bin, die auf dieses Problem gestoßen ist.

Answer 1

Ein vielversprechendes Produkt, das Ausdrücke auf höherer Ebene wie Variablen in CSS "kompiliert", ist LESS . Es braucht Ruby. Ich habe es noch nicht benutzt, aber es ist definitiv einen Blick wert.

Eine primitivere Art, dies zu tun, wäre die Verwendung einer serverseitigen Skriptsprache wie PHP.

In PHP würden Sie Konstanten wie folgt definieren:

define ("MYBLUE", "#33CC99");

und dann die Ausgabe des Wertes bei Bedarf mit <?=MYBLUE;?>

Großer Nachteil: Um dies in externen css- und js-Dateien zu tun, müssten diese natürlich vom PHP-Interpreter geparst werden, was bei einer hohen Besucherzahl nicht gerade leistungsfördernd ist. Für eine Website mit geringem Besucheraufkommen spielt das wahrscheinlich keine Rolle.

Answer 2

Ja, das ist unmöglich. Sie könnten jedoch Ihren eigenen CSS-Präprozessor schreiben (oder einen der vorhandenen verwenden), zum Beispiel mit PHP. Der große Nachteil ist, dass Sie den Farbcode auf Ihrer gesamten Website mit PHP ausgeben müssten und Ihre Skripte wie folgt aussehen würden

tag.style.backgroundColor = <? echo $myblue; ?>

und ebenso in CSS

.someClass {
  background-color: <? echo $myblue ?>
}

oder etwas Ähnliches. Und das ist auch nicht wirklich schön. Natürlich kann man jede beliebige serverseitige Skriptsprache verwenden. Soweit ich das beurteilen kann, ist dies die einzige Möglichkeit, eine Farbkonstante über eine ganze Website hinweg zu verwenden.

Sie könnten sich einige Prozessoren ansehen:

• http://cssp.codeplex.com/
• http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor
• http://icant.co.uk/articles/cssconstants/

Answer 3

Sie können sich ansehen HAML + SASS . Sie können zwar nicht für alle drei Sprachen gleichzeitig Variablen definieren, aber diese beiden können das Schreiben von HTML+CSS erheblich erleichtern.

Answer 4

Ich würde das so angehen, dass ich eine Klasse in meinem CSS einrichte.

.color_class {color: #33CC99;}

Dann rufen Sie es in meinem HTML

<td class="color_class" />

Sie können einem HTML-Element mehrere Klassen zuweisen.

In der JS benennen Sie einfach die Klasse

document.getElementById('id').className = 'color_class';

Natürlich können Sie selbst bestimmen, wie Sie Ihr Element auswählen möchten. Eine JS-Bibliothek hat wahrscheinlich noch einfachere Methoden für die Zuweisung von CSS-Klassen.

Answer 5

Um dies zu erreichen, ohne dynamisches CSS zu verwenden (z. B. durch Auslieferung einer PHP-Datei mit Content-Type text/css ), ist es am besten, wenn Sie die Stellen, an denen Sie das "Thema" definieren, abgrenzen.

<script type="text/javascript">
   var theme = '#003366';
 </script>

Dann können Sie eine JavaScript-Datei verwenden, um Stile auf der Grundlage der Themen zu schreiben.

Wenn Sie jedoch die Möglichkeit haben, einen CSS-Präprozessor zu verwenden, sollten Sie dies tun. Sie haben dann viel mehr Flexibilität und der Code ist leichter zu pflegen. Ich verwende fast immer eine PHP- oder JSP-Seite für CSS.