Variablen in Sass | Erklärt

Syntaktisch großartiges Stylesheet (SASS) Vorverarbeitet CSS und funktioniert gut mit all seinen Versionen. Es verbessert die Fähigkeit der Grundsprache, indem es die Verwendung von Variablen, Verschachteln, Mixins, Vererbung usw. unterstützt. Wenn wir über seine Variablen sprechen, sind dies eine großartige Möglichkeit, immer wieder redundante CSS -Werte zu verhindern. Um mehr über SASS -Variablen zu erfahren, folgen Sie dem Artikel bis zum Ende.

Variablen in Sass

SASS -Variablen werden verwendet, um Informationen zu speichern, die später überall im Stylesheet verwendet werden können. Die Art der Informationen, die eine SASS -Variable speichert.

Syntax

$ varibename: variableValue;

Um eine SASS -Variable zu deklarieren, müssen Sie ein Dollar ($) -Schild, gefolgt vom variablen Namen, des Dickdarms, des variablen Werts und eines Semikolons enthalten.

Beispiel
Lassen Sie uns SASS -Variablen mit Hilfe eines Beispiels weiter untersuchen.

Html

Dies ist ein Absatz.

Dies ist ein Div

Dies ist unsere HTML -Datei, in der wir zwei Elemente erstellt haben, die ein Absatz sind, und ein DIV -Container. In der Zwischenzeit wurde der Link der CSS -Datei, das als Ergebnis der Zusammenstellung der SASS -Datei erzeugt wurde.

Sass

$ fontfam: Verdana, sans-serif;
$ fontsize: 35px;
$ fontcolor: pink;
$ Border: 2px Solid Black;
$ padding: 10px;
P
Schriftfamilie: $ fontfam;
Schriftgröße: $ fontsize;
Farbe: $ fontcolor;

.Container
Polsterung: $ Polsterung;
Grenze: $ Grenze;

Dies ist unsere SASS -Datei mit .SCSS -Erweiterung. Hier haben wir fünf SASS -Variablen erstellt, nämlich $ fontfam, $ fontsize, $ fontcolor, $ border und $ padding. Sobald wir erklärt haben, verwenden wir diese Variablen in unserer Datei, um unsere Elemente zu stylen.

CSS

Dies ist unsere resultierende CSS -Datei.

Ausgang

Elemente wurden erfolgreich mit SASS -Variablen gestaltet.

SASS -Variablen Umfang

Variablen in SASS können überall im Dokument deklariert werden, bevor diese verwendet werden und entweder einen globalen Bereich oder einen lokalen Bereich haben.

Eine SASS -Variable mit einem globalen Bereich wird zu Beginn der Datei deklariert und später bei Bedarf im gesamten Dokument verwendet.

In der Zwischenzeit wird eine SASS -Variable mit einem lokalen Bereich in einem Block deklariert und kann nur im Bereich dieses bestimmten Blocks verwendet werden.

Beispiel
Das folgende Beispiel zeigt globale und lokale Scoped -Sass -Variablen.

Sass

$ fontsize: 35px;
$ padding: 10px;
P
Schriftfamilie: $ fontfam;
Schriftgröße: $ fontsize;
Farbe: $ fontcolor;

.Container
$ Border: 2px Solid Black;
Polsterung: $ Polsterung;
Grenze: $ Grenze;
Schriftgröße: $ fontsize;

Dies ist der gleiche Code wie oben mit dem einzigen Unterschied, dass $ fontsize und $ padding globale Variablen sind und überall in der Datei verwendet werden können. Inzwischen ist $ border eine lokale Variable und kann nur im Bereich des Blocks verwendet werden wird in. Dieser Code hat die gleiche Ausgabe wie im vorherigen Abschnitt gezeigt. Darüber hinaus wird der resultierende CSS -Ausgang auch der gleiche sein.

Abschluss

SASS -Variablen werden verwendet, um Informationen zu speichern, die später überall im Stylesheet verwendet werden können. Diese Variablen können Farben, Zahlen, Strings, Listen, Booleschen und Nulls speichern. Der Name einer SASS -Variablen muss mit einem Dollar ($) -Styp beginnen, und diese Variablen können entweder einen globalen Bereich oder einen lokalen Bereich haben. Darüber hinaus sind dies eine großartige Möglichkeit, immer wieder redundante CSS -Werte zu verhindern. In dem Artikel werden SASS -Variablen ausführlich zusammen mit relevanten Beispielen erläutert.