Kann ich benutzerdefinierte Farbdefinitionen erstellen, die ich für CSS, JS und HTML freigeben kann?

Question

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

Ich möchte in der Lage sein zu sagen, (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, das ist unmöglich und Google drehte nichts, also hat jemand irgendwelche Ideen? Ich bezweifle, dass ich die einzige Person bin, die darauf stößt.

Answer 1

Ein vielversprechendes Produkt, das Ausdrücke 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 Möglichkeit wäre eine serverseitige Skriptsprache wie PHP.

Sie würden wie so Konstanten in PHP definieren:

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

und dann den Wert ausgibt, wo <?=MYBLUE;?>

Big Nachteil benötigt werden: diese in externen CSS zu tun und JS-Dateien, würden Sie haben offensichtlich um sie vom PHP-Interpreter analysieren zu lassen, was bei vielen Besuchern nicht sehr leistungsfähig ist. Für eine Website mit wenig Verkehr ist es wahrscheinlich nicht wichtig.

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 die Ausgabe der Farbcode auf Ihre gesamte Website mit PHP und Ihre Skripte ähnlich wie

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

und ebenfalls in CSS

oder etwas hätte aussehen würde. Und das ist auch nicht wirklich nett. Natürlich können Sie jede serverseitige Skriptsprache Ihrer Wahl verwenden. Soweit ich das beurteilen kann, ist dies die einzige Möglichkeit, eine Farbkonstante auf einer ganzen Website zu verwenden.

Sie konnten einen Blick auf einige Prozessoren haben:

• 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

Um dies zu erreichen ohne jede dynamische CSS (z.B.Servieren einer PHP-Datei mit Content-Typ text/css), ist Ihre beste Wette, die Orte zu trennen, wo Sie das "Thema" definieren.

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

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

Wenn Sie jedoch in der Lage sind, einen CSS-Preprozessor zu verwenden, gehen Sie damit fort. Sie werden viel mehr Flexibilität haben und der Code wird einfacher zu pflegen sein. Ich verwende fast immer eine PHP- oder JSP-Seite für CSS.

Answer 4

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

Answer 5

Wie würde ich dies erreichen, um eine Klasse in meinem CSS zu machen.

.color_class {color: #33CC99;} 

Dann rufen Sie es in meinem HTML

<td class="color_class" /> 

Sie mehrere Klassen zu einem HTML-Element zuordnen.

Im JS, nennen nur die Klasse

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

Natürlich können Sie mit spielen können, wie Sie Ihr Element auswählen möchten. Eine JS-Bibliothek bietet wahrscheinlich noch einfachere Methoden zum Zuweisen von CSS-Klassen.

Answer 6

Wie andere Benutzer bemerkt haben, können Sie dies nicht in reinem HTML, JS oder CSS tun, außer Sie übergeben alle HTML-, JS- und CSS-Inhalte über ein CGI/PHP/ASP-Skript - was eigentlich kein schlechter Ansatz ist es ist einfach zu pflegen.

Wenn Sie eine Abfragezeichenfolge im Verweis auf enthaltene CSS/JS-Dateien verwenden - z. '/css/stylesheet.php?timestamp=2010-01-01+00:00:00', dann werden fast alle Clients Ihre CSS/JS-Dateien aggressiv zwischenspeichern, was jegliche Auswirkungen auf das Load-Parsing in einer Skriptsprache verhindert (obwohl es auf der Website wahrscheinlich nicht besonders viel zu tun gibt, wäre ich nicht allzu sehr damit verbunden).

Wenn Sie Apache verwenden (was wahrscheinlich ist), wäre ein alternativer Ansatz, verwenden Sie etwas wie mod_set, um alle HTML-, JS- und CSS-Dateien im laufenden Betrieb für Sie neu zu schreiben. Dies kann schwieriger zu unterstützen sein, wenn Sie mit der Konfiguration von Apache nicht vertraut sind (oder einen anderen Webserver verwenden).

Hinsichtlich der Benennung markieren:

Mit beiden Ansätzen Ich schlage vor, stark ein klares Tagging-System unter Verwendung von dynamischen Variablen (zB% MyBlue%) zu bezeichnen und repräsentativ seinen Namen berücksichtigen zu müssen, Variablen (zB% HeadingBackgroundColor%, % FontColor%, auch wenn beide auf% MyBlue%) eingestellt sind, da dies verhindern kann, dass die Dinge später haarig werden (wenn Sie feststellen, dass die Änderung eines Wertes beabsichtigte Konsequenzen hat). Die Verwendung repräsentativerer Namen mag auf den ersten Blick unnötig ausführlich erscheinen, verursacht aber in vielen Fällen Probleme, da Farben auf unbeabsichtigte Weise miteinander kollidieren, wenn sie sich signifikant vom ursprünglichen Schema unterscheiden (dies gilt für viele Mainstream-Software) was ist skinnable - weil der Autor die Annahme gemacht, dass% value1% und% value2% immer zusammen gehen würden und so würde% value1% und% value3% - was bedeutet, dass die Optionen für Themeting tatsächlich durch eine unbeabsichtigte Abhängigkeit stark eingeschränkt sind).

Answer 7

Ich mache das zur Build-Zeit, indem ich meine CSS-Dateien über Freemarker laufen lasse.

Answer 8

Es gibt kein Konzept von "Variablen" in CSS, aber ich würde dringend empfehlen nicht tun, was Sie tun. Es gibt keinen guten Grund, dass Sie nicht alle Ihre Stilinformationen in Ihrem CSS-Sheet als CSS-Klassen definieren können. Wenn Sie das tun und dann diese Klassen in HTML und Javascript anwenden, ist das eine große Belastung für das Kopieren und Einfügen.

Zweitens erinnern, dass Sie mehr als eine CSS-Klasse für ein Element definieren können, z.

<div class='blue-text white-background'>my content</div> 

Sie dann diejenigen, unabhängig voneinander in CSS, a la definieren:

.blue-text { color : Blue; } 
.white-background { background-color: white;} 

und Sie können sogar Regeln erstellen, die nur wirksam, wenn beide uses sind:

.blue-text.white-background { color : AliceBlue; } 

Wenn Sie Ich möchte die Farbauswahl dynamisch generieren lassen. Die einzige Möglichkeit, dies zu tun, ist die von anderen vorgeschlagene Methode, die entweder Ihre Dateien vor der Bereitstellung vorverarbeitet oder das CSS dynamisch generieren lässt d serviert von Ihrer Sprache der Wahl.

Answer 9

Ich bin mir nicht sicher über dein Endziel. Wenn Sie eines von mehreren Designs für eine Webseite auswählen möchten, können Sie einfach mehrere CSS-Dateien und eine Cookie-/Sitzungsvariable/einen Datenbankspeicher des vom Benutzer bevorzugten Stylesheets verwenden. Dann könnten Sie gerade tun

<link rel=<? echo stylepref; ?> type='text/css'> 

oder etwas in diese Richtung

Wenn Sie wollen in der Lage sein, vollständig die Website anpassen, dann eine der oben genannten Antworten benötigt würden.

Answer 10

In reinen Client-Seite CSS-Selektoren Gruppierung können Sie die gleiche Farbe auf viele verschiedene Elemente setzen:

p, .red, #sub, div a:link { color: #f00; }