Grundlagen von SASS
Dieser Artikel erklärt die Grundlagen von SASS.
Wir erklären die grundlegenden Funktionen von SASS Schritt für Schritt und zeigen anhand von praktischen Beispielcodes, wie sie verwendet werden.
YouTube Video
Grundlagen von SASS
SASS (Syntactically Awesome Stylesheets) ist eine Stylesheet-Sprache, die CSS erweitert. Durch die Verwendung von SASS können Sie fortgeschrittene Funktionen nutzen, die in CSS nicht verfügbar sind, wie Variablen, Verschachtelung, Mixins und Vererbung. Dies erleichtert die Verwaltung und Wiederverwendung von Stylesheets erheblich.
Was ist SASS?
SASS ist eine Sprache, die das Schreiben von CSS vereinfacht und gleichzeitig flexiblere und leistungsfähigere Gestaltungsmöglichkeiten bietet. SASS bietet auch die SCSS-Syntax (Sassy CSS), die der Standard-CSS-Syntax ähnelt. Hier ist ein Beispiel:.
SCSS-Beispiel
1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5 font-family: $base-font;
6 background-color: $bg-color;
7}CSS-Beispiel
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4}SASS einrichten
Installation
Um SASS zu verwenden, installieren Sie zunächst Node.js und dann SASS mit dem folgenden Befehl:.
1npm install -g sassKompilierung
Um SASS-Dateien (.scss oder .sass) in CSS zu kompilieren, verwenden Sie den folgenden Befehl:.
1sass input.scss output.cssSie können auch die watch-Option verwenden, um Änderungen an Dateien zu überwachen und eine Echtzeit-Kompilierung durchzuführen.
Variablen
Mit SASS können Sie Variablen verwenden, um Werte wie Farben und Schriftgrößen wiederzuverwenden.
Beispielcode
1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5 color: $primary-color;
6 font-family: $font-stack;
7}- Dieser Code verwendet SASS-Variablen zur Definition von Farben und Schriftarten und nutzt sie innerhalb des
body-Selectors wieder, um Konsistenz und Wartbarkeit zu verbessern.
Kompiliertes Ergebnis
1body {
2 color: #3498db;
3 font-family: 'Roboto', sans-serif;
4}Verschachtelung
SASS verbessert die Lesbarkeit des Codes, indem CSS-Selektoren verschachtelt werden können.
Beispielcode
1nav {
2 ul {
3 list-style: none;
4 margin: 0;
5 padding: 0;
6
7 li {
8 display: inline-block;
9
10 a {
11 text-decoration: none;
12 color: #333;
13
14 &:hover {
15 color: #3498db;
16 }
17 }
18 }
19 }
20}- Dieser Code verwendet eine verschachtelte Hierarchie, um die Struktur der Styles optisch zu verdeutlichen.
Kompiliertes Ergebnis
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
6
7nav ul li {
8 display: inline-block;
9}
10
11nav ul li a {
12 text-decoration: none;
13 color: #333;
14}
15
16nav ul li a:hover {
17 color: #3498db;
18}Mixins
Mixins ermöglichen es Ihnen, Code über mehrere Selektoren hinweg wiederzuverwenden.
Beispielcode
1@mixin border-radius($radius) {
2 border-radius: $radius;
3 -webkit-border-radius: $radius;
4 -moz-border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}
10
11.card {
12 @include border-radius(5px);
13}- Dieser Code definiert mit
@mixineinenborder-radius-Stil und verwendet ihn mit@includeinbuttonund.cardwieder, was ein effizientes Styling ohne Duplizierung ermöglicht.
Kompiliertes Ergebnis
1button {
2 border-radius: 10px;
3 -webkit-border-radius: 10px;
4 -moz-border-radius: 10px;
5}
6
7.card {
8 border-radius: 5px;
9 -webkit-border-radius: 5px;
10 -moz-border-radius: 5px;
11}Vererbung (@extend)
Durch Vererbung können Sie vorhandene Stile auf andere Selektoren anwenden.
Beispielcode
1%button-style {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 @extend %button-style;
9 border: none;
10}
11
12.link-button {
13 @extend %button-style;
14 text-decoration: none;
15}- Dieser Code definiert einen Platzhalter-Selektor
%button-styleund verwendet@extend, um gemeinsame Styles sowohl aufbuttonals auch auf.link-buttonanzuwenden, was Wiederverwendung und Konsistenz fördert.
Kompiliertes Ergebnis
1button, .link-button {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 border: none;
9}
10
11.link-button {
12 text-decoration: none;
13}Bedingungen und Schleifen
SASS unterstützt Bedingungen und Schleifen, um Styles dynamisch zu generieren.
Beispiel für eine Bedingung
1$theme: dark;
2
3body {
4 background-color: if($theme == light, #fff, #333);
5 color: if($theme == light, #333, #fff);
6}- Dieser Code verwendet die SASS-
if-Funktion, um Hintergrund- und Textfarben abhängig vom Wert von$themezu wechseln, was eine dynamische Stil-Generierung durch Bedingungen ermöglicht.
Beispiel für eine Schleife
1@for $i from 1 through 3 {
2 .column-#{$i} {
3 width: calc(100% / $i);
4 }
5}- Dieser Code verwendet eine SASS-
@for-Schleife, um Klassen dynamisch von.column-1bis.column-3zu generieren.
Kompiliertes Ergebnis
1body {
2 background-color: #333;
3 color: #fff;
4}
5
6.column-1 {
7 width: 100%;
8}
9
10.column-2 {
11 width: 50%;
12}
13
14.column-3 {
15 width: 33.3333%;
16}Dateiaufteilung und Importierung
Mit SASS können Sie Dateien aufteilen und mit @use oder @import wiederverwenden.
Dateistruktur
styles/
_variables.scss
_mixins.scss
main.scss_variables.scss
1$primary-color: #3498db;_mixins.scss
1@mixin flex-center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}main.scss
1@use 'variables';
2@use 'mixins';
3
4header {
5 background-color: variables.$primary-color;
6 @include mixins.flex-center;
7}Kompiliertes Ergebnis
1header {
2 background-color: #3498db;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}Zusammenfassung
Der Einsatz von SASS vereinfacht das Schreiben von CSS und verbessert die Wiederverwendbarkeit sowie Wartbarkeit des Codes.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.