Sass Variables
Das erste hilfreiche Feature ist die Existenz von Variablen. Wir können Werte im Code speichern und wiederverwenden. Es ist so ähnlich wie in Programmiersprachen, die es ermöglichen, eine Variable einmal zu erstellen und mehrfach zu verwenden. Um eine Variable zu deklarieren, müssen wir ein Dollarzeichen () und einen Variablennamen setzen, dann einen Doppelpunkt (
:`) und einen Wert angeben.
$textPrimaryColor: #49423c;
Hinweis
Wir können jede Namensnotation verwenden, sei es Kebab-Case (
text-primary-color
), Snake-Case (text_primary_color
) oder Camel-Case (textPrimaryColor
). Wichtig ist, die gleiche Namensnotation im gesamten Projekt zu verwenden.
Stellen wir uns vor, dass wir ein Markup erstellen müssen, in dem alle Textfarben #474943
und die Schriftgröße 24px
sein sollen. Die Sass-Datei würde folgendermaßen aussehen:
$textColor: #474943;
$textFontSize: 24px;
p {
color: $textColor;
font-size: $textFontSize;
}
Wir halten Variablen immer so beschreibend wie möglich, damit wir sicherstellen können, wofür jede Variable verantwortlich ist.
Der Vorteil ist, dass es einfach ist, später Designänderungen am Projekt vorzunehmen. Wenn sich die Schriftgröße oder die Farbe des Textes ändert, können wir den Wert der Variablen $textColor
und $textFontSize
aktualisieren, und das Projekt wird ebenfalls bearbeitet.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.04
Sass Variables
Swipe um das Menü anzuzeigen
Das erste hilfreiche Feature ist die Existenz von Variablen. Wir können Werte im Code speichern und wiederverwenden. Es ist so ähnlich wie in Programmiersprachen, die es ermöglichen, eine Variable einmal zu erstellen und mehrfach zu verwenden. Um eine Variable zu deklarieren, müssen wir ein Dollarzeichen () und einen Variablennamen setzen, dann einen Doppelpunkt (
:`) und einen Wert angeben.
$textPrimaryColor: #49423c;
Hinweis
Wir können jede Namensnotation verwenden, sei es Kebab-Case (
text-primary-color
), Snake-Case (text_primary_color
) oder Camel-Case (textPrimaryColor
). Wichtig ist, die gleiche Namensnotation im gesamten Projekt zu verwenden.
Stellen wir uns vor, dass wir ein Markup erstellen müssen, in dem alle Textfarben #474943
und die Schriftgröße 24px
sein sollen. Die Sass-Datei würde folgendermaßen aussehen:
$textColor: #474943;
$textFontSize: 24px;
p {
color: $textColor;
font-size: $textFontSize;
}
Wir halten Variablen immer so beschreibend wie möglich, damit wir sicherstellen können, wofür jede Variable verantwortlich ist.
Der Vorteil ist, dass es einfach ist, später Designänderungen am Projekt vorzunehmen. Wenn sich die Schriftgröße oder die Farbe des Textes ändert, können wir den Wert der Variablen $textColor
und $textFontSize
aktualisieren, und das Projekt wird ebenfalls bearbeitet.
Danke für Ihr Feedback!