Ich verwende einige Farben in meinem CSS-Stylesheet. Zum Beispiel,

#testdiv{
  background: #123456;
}

Ist es möglich, diese Farbe anhand des Namens zu definieren, damit ich sie im CSS-Blatt wie folgt referenzieren kann?

#testdiv{
  background: COLORNAME;
}

Es ist wahrscheinlich besser, eine CSS-Klasse zu definieren und sie für jedes Element wiederzuverwenden, dem Sie die Farbe zuweisen möchten, anstatt sie einem bestimmten Element zu codieren.

Wie so:

.darkBackground {
   background: #123456;
}

.smallText {
   font-size: 8pt;
}

Es ist auch hilfreich zu wissen, dass auf ein Element mehrere Klassen angewendet werden können, sodass Sie Ihre "konstanten" Elementwerte in separate Klassen aufteilen und bei Bedarf mehr als eine anwenden können.

<div id="myDiv1" class="darkBackground smallText"></div>
<div id="myDiv2" class="darkBackground bigText"></div>

Nicht mit einfachem CSS, aber es gibt einige CSS-Erweiterungen, die Sie verwenden können, wie Sass oder Less- CSS .

Hier ist ein Beispiel für weniger CSS:

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Ja, die Verwendung von Klassen ist ein guter Ansatz, aber es ist jetzt möglich, Variablen in CSS zu deklarieren. Und Variablen (insbesondere Farbvariablen) sind unglaublich nützlich, wenn Sie dieselbe Farbe deklarieren (eine, bei der Sie den Hex-Wert benötigen, wenn Sie eine integrierte Farbe verwenden, ist dies nicht so wichtig).

Und dies ist die Verwendung von einfachem CSS (und tbh, nicht annähernd so elegant wie die Verwendung von SASS oder lessCSS), aber es funktioniert für Zwecke von einfachem CSS. Definieren Sie zunächst die tatsächliche Variable im :rootBlock. Sie können es beispielsweise auch in einem pBlock definieren (oder in irgendetwas anderem), aber es ist nur in diesem Block verfügbar. Um sicherzustellen, dass es global zugänglich ist, legen Sie es im Stammblock ab:

:root {
  --custom-color: #f0f0f0;
}

Und mit der varMethode (ohne die var-Methode wird sie nicht als tatsächliche Referenz aufgelöst) können Sie später darauf verweisen:

p{
    color: var(--custom-color);
}

Da der :rootBlock (wie alle anderen CSS-Deklarationen) ein voll funktionsfähiger Block ist, der auf Elemente verweist, können Sie Folgendes nicht deklarieren:

:root{
    color: #00ff00;
}

Das würde auf das Farbattribut jedes einzelnen Elements verweisen und es auf (in diesem Beispiel) setzen #00ff00. Jeder von Ihnen deklarierte Variablenname muss mit beginnen --, was bedeutet, dass Sie Folgendes tun können:

:root{
    --color: #00ff00;
}

Und wieder, wenn Sie können, verwenden Sie etwas wie SASS oder lessCSS. Die Möglichkeit, sie durch Schreiben @color = #fff* und Verweisen auf @color* zu deklarieren, ist viel einfacher als der Umgang mit einfachem CSS und die Verwendung des varSchlüsselworts jedes Mal, wenn Sie auf eine benutzerdefinierte Eigenschaft zugreifen möchten.

Und Sie können mit JS auf Inline-CSS zugreifen, um die Eigenschaften abzurufen und / oder zu ändern:

//Inline CSS
element.style.getPropertyValue("--custom-color");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--custom-color");

// set variable on inline style
element.style.setProperty("--custom-color", "#f0f0f0");

HINWEIS!

Dies ist eine kürzlich hinzugefügte Funktion, daher ist es wichtig, die Browserkompatibilität zu überprüfen . Insbesondere Firefox ist besondere Aufmerksamkeit wert, da es eine Lücke zwischen der Einführung der Variablendeklarationen selbst und der var()Methode gibt. caniuse schätzt derzeit, dass 91,65% der Benutzer einen Browser mit Unterstützung für die Methode ausführen. Und es ist auch erwähnenswert, dass IE das überhaupt nicht tut.

_{* mit lessCSS ist es @color, mit SASS ist es$color}

Dafür gibt es einige Vorschläge , so dass es bald passieren könnte, aber meines Wissens wurde noch nichts standardisiert.

Das Problem bei der Verwendung von CSS-Klassen besteht darin, dass sie keine Hilfe sind, wenn Sie denselben Wert für verschiedene Eigenschaften verwenden möchten, z. B. wenn Sie einen bestimmten Farbwert für einen Rahmen für ein Element und eine Hintergrundfarbe für verwenden möchten Ein weiterer.

In CSS können Sie Ihre Konstante deklarieren in : root block:

:root {
  --main-bg-color: #1596A7;
}

Und mit der var () -Methode:

.panel-header {
    background: var(--main-bg-color);
    color: ...
}

Sie können Sass- Variablen verwenden:

$color: #4D926F;

.someclass{
  color: $color;
}

Verwenden Sie Sass oder weniger .

Heutzutage ist die Verwendung von Präprozessoren wie den oben genannten eine gängige Praxis für einen besseren Front-End-Entwicklungsworkflow.

Es hilft Ihnen, besser organisiert zu sein, und Funktionen wie Variablen oder Mixins sind einige der Gründe, die es wert sind, berücksichtigt zu werden.

Sie können Konstanten in einer CSSDatei haben und diese wie folgt deklarieren:

*{
 -my-lightBlue: #99ccff;
 -my-lightGray: #e6e6e6;
}

Dann können Sie sie in der CSS-Datei wie folgt verwenden:

.menu-item:focused {
  -fx-background-color: -my-lightBlue;
}

Danach können Sie sie programmgesteuert wie folgt verwenden:

progressBar.setStyle("-fx-accent: -my-lightBlue;");

Die Standardmethode hierfür ist PHP. Fügen Sie am Anfang Ihrer CSS-Datei #define-Anweisungen hinzu, z

#define COLORNAME: #123456;

Führen Sie an dieser Stelle ein PHP-Skript aus, anstatt eine Verknüpfung mit der CSS-Datei im Kopf Ihrer HTML-Datei herzustellen. Das Skript lädt die CSS-Datei, ersetzt alle Vorkommen von COLORNAMEby #123456und überträgt den gepatchten Text mit echooder an den Client print.

Alternativ können Sie die Quelldatei hochladen (auch mit PHP), mit PHP eine CSS-Datei erstellen, in der alle Vorkommen von #defines ersetzt werden, und diese Datei in Ihrem HTML-Code verwenden. Dies ist effizienter, da Sie die Konvertierung beim Hochladen nur einmal durchführen, anstatt jedes Mal, wenn Sie die HTML-Datei laden.