Heim > Artikel > Web-Frontend > Wie kann man in SASS eine Variable festlegen, die keinem Wert entspricht?
Wie kann man in SASS eine Variable festlegen, die keinem Wert entspricht?
- 王林nach vorne
- 2023-08-31 09:01:071079Durchsuche
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.
Voraussetzungen
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.
Verschiedene Möglichkeiten, eine Variable so festzulegen, dass sie mit nichts in SASS gleich ist
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.
Methode 1: Verwenden Sie das Null-Schlüsselwort
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.
Grammatik
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;
Beispiel
Sehen wir uns ein vollständiges Beispiel an, wie man eine Variable mit dem Schlüsselwort null auf „Nichts“ setzt.
HTML-Code
<!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>
SASS-Code
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;
}
Kompilierter CSS-Code
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
body {
background-color: ;
color: ;
font-size: ;
}
Methode 2: Verwenden Sie die Unscharf-Funktion
Eine andere Möglichkeit, eine Variable in SASS auf Null zu setzen, ist die Verwendung der Funktion „unset“. Die unset-Funktion entfernt eine Variable aus dem Speicher und setzt sie effektiv auf Null. Hier ist ein Beispiel dafür, wie man eine Variable mithilfe der unset-Funktion auf Null setzt.
Grammatik
$newVar: 15; $newVar: unset($newVar);
In der obigen Syntax wird $newVar zunächst der Wert 15 zugewiesen. Verwenden Sie dann die unset-Funktion, um $newVar aus dem Speicher zu entfernen und es effektiv auf null zu setzen.
Beispiel
Sehen wir uns ein vollständiges Beispiel an, wie man eine Variable mit der Funktion „unset“ auf „Keine“ setzt.
HTML-Code
<!DOCTYPE html>
<html>
<head>
<title>Example to set the variable to equal nothing using unset function</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>
SASS-Code
Nachfolgend finden Sie den SASS-Code, in dem wir zwei Variablen $newVar1 und $newVar2 mit den Werten 15 bzw. 12 deklarieren. Jetzt wird die Funktion unset verwendet, um $newVar1 und $newVar2 aus dem Speicher zu entfernen und sie effektiv auf Null zu setzen.
$newVar1: 15;
$newVar1: 12;
$newVar1: unset($newVar1);
$newVar2: unset($newVar2);
h1 {
font-size: $newVar1;
}
p {
font-size: $newVar2;
}
Kompilierter CSS-Code
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 zu sehen, fügen Sie unbedingt den folgenden Code zwischen den
h1 {
font-size: ;
}
p {
font-size: ;
}
Methode 3: Verwenden Sie die #{}-Interpolation
Die #{}-Interpolationssyntax wird zur Kompilierzeit ausgewertet, sodass in kompiliertem CSS der resultierende Wert von $newVar die leere Zeichenfolge ist. In manchen Situationen ist dieses Verhalten möglicherweise nicht erwünscht. Wenden Sie diese Technik daher gegebenenfalls mit Vorsicht an.
Grammatik
$newVar: #{" "};
In der obigen Syntax wird $newVar auf eine leere Zeichenfolge gesetzt, die mithilfe der Interpolationssyntax #{} mit einem Leerzeichen darin erstellt wird. Diese Technik ist nützlich, wenn Sie eine Variable auf eine leere Zeichenfolge statt auf Null setzen müssen.
Beispiel
Sehen wir uns ein Beispiel für das Setzen einer Variablen auf „Keine“ mithilfe der Interpolationsmethode an.
HTML-Code
<!DOCTYPE html>
<html>
<head>
<title>Example to set the variable to equal nothing using Interpolation</title>
<style>
/* Add the CSS compiled code below */
</style>
</head>
<body>
<h1>Welcome to Tutorialspoint!</h1>
</body>
</html>
SASS-Code
Unten ist der SASS-Code, in dem wir eine Variable $newVar deklarieren und sie mithilfe der Interpolationssyntax auf eine leere Zeichenfolge setzen.
$newVar: #{" "};
body {
padding: $newVar;
margin: $newVar;
}
编译的 CSS 代码
下面是在 SASS 编译器的帮助下编译上述 SASS 代码后生成的编译代码。要查看文档中的更改，请确保在相应 HTML 文件中的
body {
padding: ;
margin: ;
}
结论
在本文中，我们了解了如何使用不同的方法在 SASS 中将变量设置为空，包括使用 null 关键字、unset 函数和 #{} 插值语法。详细介绍这些技术，它们在不同情况或项目需求中非常有用，在这些情况或项目需求中，我们需要创建一个占位符变量，稍后可以在应用程序中为其分配值。
在SASS中，声明变量更具可读性和可维护性，从而节省了开发人员的时间和精力。要使用 SASS，请确保在 IDE 中安装了 SASS 编译器，就像上面讨论的在 VS Code 中使用 SASS 的过程一样，我们需要将 SASS 文件正确导入到 HTML 文件中。
Das obige ist der detaillierte Inhalt vonWie kann man in SASS eine Variable festlegen, die keinem Wert entspricht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!