So verwenden Sie CSS-Variablen wie ein Profi
CSS-Variablen, auch als benutzerdefinierte Eigenschaften bekannt, helfen Ihnen, Wiederholungen in Ihren Stylesheets zu minimieren. Dies wiederum hilft Ihnen, Zeit und Mühe zu sparen, wenn Sie Änderungen an Ihrem Design vornehmen. Sie können sich auch darauf verlassen, dass Sie keine Werte verpassen, die Sie aktualisieren müssen.
Durch den Zugriff auf das DOM können Sie Variablen erstellen, speichern und in Ihrem Stylesheet wiederverwenden.
So definieren und verwenden Sie CSS-Variablen
Um Ihre Stylesheets übersichtlicher, wartbarer und wiederverwendbar zu machen, können Sie CSS-Variablen in jeder Eigenschaft verwenden, die einen Wert akzeptiert.
Nehmen Sie das folgende Beispiel einer HTML-Datei und einer CSS-Datei, die keine CSS-Variablen verwendet.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary">Primary</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: red;
}
So sollte Ihre Seite aussehen:
Die im obigen Stylesheet verwendete .btn -Klasse ist nicht dynamisch und veranlasst Sie, eine separate Klasse zu erstellen, um einzelne Schaltflächen anzupassen. Um schöne Websites zu erstellen, müssen Sie mit Ihrem Front-End-Design dynamisch sein. Durch das Implementieren von Schaltflächen auf diese Weise wird diese Aufgabe einfach mühsam.
Wie bei den meisten Programmiersprachen müssen Sie CSS-Variablen initialisieren und ersetzen.
Um eine CSS-Variable zu initialisieren, stellen Sie dem Variablennamen doppelte Bindestriche voran:
:root{
/*CSS variable*/
--variable_name: value;
}
Sie können eine Variable überall initialisieren, aber beachten Sie, dass Sie diese Variable nur innerhalb des initialisierten Selektors verwenden können. Aus diesem Grund werden CSS-Variablen herkömmlicherweise innerhalb des Stammselektors initialisiert. Dies zielt auf das Element der höchsten Ebene des DOM ab und ermöglicht den globalen Zugriff auf die Variablen durch das gesamte HTML-Dokument.
Um die Variable in Ihrem CSS-Stil zu ersetzen, verwenden Sie die Eigenschaft var() :
:root {
/*CSS variable*/
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary);
background-color: var(--secondary);
}
.sub-primary {
color: var(--secondary);
background-color: var(--primary);
}
Der Wurzelselektor enthält zwei Variablen: –primary und –secondary . Beide Variablen werden dann jeweils als Farbe und Hintergrundfarbe in die .btn -Klasse eingesetzt.
Mithilfe der Variablen können Sie einzelne Elemente viel einfacher stylen. Durch die Wiederverwendung von Variablen können Sie einen Wert schnell einmal ändern, um ihn in jeder Instanz zu aktualisieren.
Die Eigenschaft var() kann auch ein zweites Argument annehmen. Dieses Argument fungiert als Fallback-Wert für das erste Argument in einer Situation, in der das erste nicht definiert oder ungültig ist.
Zum Beispiel:
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary, blue);
}
Ersetzen Sie in diesem Beispiel die Variable „–primary“ durch den Farbstil . Wenn dieser Wert aus irgendeinem Grund fehlschlägt, verwendet das Stylesheet den zweiten Wert als Fallback. Sie können auch eine andere CSS-Variable als Fallback-Wert verwenden.
Manipulieren und Überschreiben von CSS-Variablen mit JavaScript
Das Manipulieren von CSS-Variablen mit JavaScript kann eine leistungsstarke Möglichkeit sein, das Erscheinungsbild Ihrer Website im Handumdrehen zu ändern. Mithilfe von JavaScript können Sie die Werte dieser Variablen aktualisieren und sehen, wie sich die Änderungen auf Ihrer Website widerspiegeln.
Es ist wichtig zu beachten, dass die mit JavaScript vorgenommenen Änderungen nur für die aktuelle Sitzung gelten. Sie müssen entweder die ursprüngliche Quelle aktualisieren oder den neuen Wert wie in einem Cookie auf dem Client speichern, um die Änderungen beizubehalten.
Hier ist ein Beispiel für die Verwendung von JavaScript zum Aktualisieren des Werts einer CSS-Variablen.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
<script>
function changeColor() {
// Get the element you want to change the variable on
const myElement = document.querySelector(":root");
// Get the current value of the variable
let currentValue = getComputedStyle(myElement).getPropertyValue(
"--secondary"
);
// Set the new value for the variable
myElement.style.setProperty("--secondary", "#DAF7A6");
}
</script>
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary" onclick="changeColor()">
Primary
</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
}
.sub-primary {
color: var(--primary);
background-color: var(--secondary);
}
In diesem JavaScript-Code aktualisiert die Funktion changeColor() die Farbe der ersten Schaltfläche, wenn der Benutzer darauf klickt.
Mithilfe von DOM-Traversal-Methoden können Sie auf die in Ihrem HTML-Dokument angewendeten Klassen oder Selektoren zugreifen und die Werte bearbeiten.
Bevor Sie auf die Schaltfläche klicken:
Nach Klick auf die Schaltfläche:
Sie können JavaScript auch verwenden, um neue CSS-Variablen zu erstellen oder sie ganz zu entfernen.
Zum Beispiel:
// Create a new variable
document.documentElement.style.setProperty('--new-color', 'blue');
// Remove a variable
document.documentElement.style.removeProperty('--new-color');
Verwenden von CSS-Variablen mit Präprozessoren
Die Verwendung von Variablen innerhalb der Frontend-Technologie wurde ursprünglich mit CSS-Präprozessoren wie SASS, LESS und Stylus erreicht.
Der Zweck von CSS-Präprozessoren besteht darin, Code zu entwickeln, der die grundlegenden Fähigkeiten von Standard-CSS erweitert. Lassen Sie diesen Code dann in Standard-CSS kompilieren, damit der Browser ihn versteht, ähnlich wie TypeScript mit JavaScript funktioniert.
Mit der Entwicklung von CSS-Variablen sind Präprozessoren nicht mehr so wichtig, aber sie können immer noch einen gewissen Nutzen bieten, wenn sie in Ihrem Projekt mit CSS-Variablen kombiniert werden.
Sie können eine SASS-Variable $main-color definieren und damit den Wert einer CSS-Variablen festlegen. Verwenden Sie dann die CSS-Variable in einer regulären Stilklasse.
Sie können auch SASS-Funktionen verwenden, um die Werte von CSS-Variablen zu manipulieren.
Zum Beispiel:
:root {
--primary: $main-color;
--secondary: lighten(var(--primary), 20%);
}
.btn {
color: var(--primary);
background-color: var(--secondary);
}
Hier manipuliert die SASS-Funktion lighten() den Wert von –primary , um einen Wert für –secondary zu erhalten .
Beachten Sie, dass auf SASS-Variablen nicht mit JavaScript zugegriffen werden kann. Wenn Sie also die Werte Ihrer Variablen zur Laufzeit manipulieren müssen, sollten Sie CSS-Variablen verwenden.
Durch die gemeinsame Verwendung von CSS-Variablen und Präprozessoren können Sie beide Vorteile nutzen, z. B. die Verwendung leistungsstarker Präprozessorfunktionen wie Schleifen und Funktionen und CSS-Variablenfunktionen wie CSS-Kaskadierung.
Tipps zur Verwendung von CSS-Variablen in der Webentwicklung
Hier sind ein paar wichtige Tipps, die Sie beachten sollten, damit Sie CSS-Variablen besser nutzen können.
Beginnen Sie mit einer klaren Namenskonvention
Wählen Sie eine Namenskonvention für Ihre Variablen, die sie einfach zu verstehen und zu verwenden macht. Verwenden Sie beispielsweise ein Präfix wie –color- für Farbvariablen oder –spacing- für Abstandsvariablen.
Verwenden Sie Variablen in Medienabfragen
Verwenden Sie Variablen in Medienabfragen, um Ihr Design einfach an unterschiedliche Bildschirmgrößen anzupassen.
Profitieren Sie von der kaskadierenden Natur von CSS
Denken Sie daran, dass CSS-Variablen kaskadierend sind, was bedeutet, dass, wenn Sie eine Variable für ein übergeordnetes Element festlegen, sich dies auf alle seine untergeordneten Elemente auswirkt.
Verwenden Sie CSS-Variablen mit Vorsicht
Die Verwendung zu vieler CSS-Variablen kann zu Verwirrung führen, verwenden Sie sie also mit Vorsicht und nur dann, wenn es sinnvoll ist und die Wartbarkeit Ihres Codes verbessert.
Testen Sie Ihre Variablen
CSS-Variablen sind eine einzigartige Möglichkeit, klaren und wartbaren Code in Ihr Stylesheet zu schreiben.
Es ist wichtig zu beachten, dass sie immer noch nicht von allen Browsern vollständig unterstützt werden. Daher sollten Sie Ihre Variablen auf Browserkompatibilität testen, um sicherzustellen, dass sie wie erwartet funktionieren und dass alle Fallback-Werte wie erwartet funktionieren.
Schreibe einen Kommentar