SASS oder Syntactically Awesome Style Sheets ist eine bei Entwicklern sehr beliebte Präprozessor-Skriptsprache, die zur Verbesserung der Funktionalität von CSS verwendet wird. SASS ermöglicht Entwicklern die Verwendung von Variablen, Verschachtelungen, Mixins und anderen erweiterten Funktionen, die in CSS nicht verfügbar sind.
Eines der Hauptmerkmale der Verwendung von SASS ist die Möglichkeit, Variablen zu deklarieren, die nichts anderes als Platzhalter für Werte sind, die wir in unseren Webanwendungs-Stylesheets wiederverwenden können. Variablen tragen dazu bei, Entwicklern Zeit und Mühe zu sparen, indem sie es ihnen ermöglichen, mehrere Werte gleichzeitig zu aktualisieren, wodurch der Code lesbarer und einfacher zu warten ist.
Manchmal möchten wir möglicherweise eine Variable auf Null setzen, was in anderen Sprachen bedeutet, dass die Variable auf Null oder undefiniert gesetzt wird. Dies ist nützlich, wenn wir eine Platzhaltervariable erstellen möchten und ihr später in der Anwendung einen Wert zuweisen können. In diesem Artikel erfahren Sie, wie Sie in SASS eine Variable festlegen, die mit nichts gleich ist.
Um SASS in HTML auszuführen, stellen Sie sicher, dass der SASS-Compiler in Ihrer IDE installiert ist (genau wie in VS Code), laden Sie den SASS-Compiler herunter und installieren Sie ihn mit dem folgenden Befehl -
npm install -g sass
Dadurch wird der SASS-Compiler global auf Ihrem System installiert. Als nächstes erstellen Sie eine neue Datei mit der Erweiterung .scss, die unseren SASS-Code enthält.
Danach importieren Sie die SASS-Datei in die HTML-Datei. Fügen Sie in der HTML-Datei einen Link zu Ihrer SASS-Datei hinzu, indem Sie das „Link“-Tag im Kopfbereich verwenden. Das rel-Attribut des Links sollte auf „stylesheet“ und sein href-Attribut auf den Pfad zu Ihrer SASS-Datei gesetzt sein.
Um eine Variable zu setzen, die keinem Wert entspricht, gibt es mehrere Möglichkeiten, z. B. die Verwendung des Schlüsselworts null, der Funktion unset oder der Interpolationsmethode #{}. Lassen Sie uns alle diese Methoden einzeln im Detail besprechen.
In SASS wird das Schlüsselwort null verwendet, um das Fehlen eines Werts anzuzeigen. Wenn eine Variable auf Null gesetzt ist, bedeutet dies, dass der Variablen kein Wert zugewiesen wurde. Dies ist nützlich, wenn Sie eine Variable deklarieren, ihr aber nicht sofort einen Wert zuweisen möchten.
Um eine Variable so festzulegen, dass sie mit nichts in SASS gleich ist, verwenden Sie einfach das Schlüsselwort null wie unten gezeigt -
$newVar: null;
Alternativ können wir eine Variable auf Null setzen, indem wir sie einer Variablen zuweisen, die bereits auf Null gesetzt ist
$newOtherVar: $newVar;
Sehen wir uns ein vollständiges Beispiel an, wie man eine Variable mit dem Schlüsselwort null auf „Nichts“ setzt.
<!DOCTYPE html>
<html>
<head>
<title>Example to set the variable to equal nothing using null keyword</title>
<style>
/* Add the CSS compiled code below */
</style>
</head>
<body>
<h1>Welcome to Tutorialspoint!</h1>
<p>The one stop solution to learn technology articles.</p>
</body>
</html>
Unten ist der SASS-Code, in dem wir die Variable $newVar mit einem Wert gleich Null deklarieren.
$newVar: null;
body {
background-color: $newVar;
color: $newVar;
font-size: $newVar;
}
Unten ist der kompilierte Code aufgeführt, der nach dem Kompilieren des obigen SASS-Codes mit Hilfe des SASS-Compilers generiert wurde. Um die Änderungen im Dokument anzuzeigen, fügen Sie unbedingt den folgenden Code zwischen den