SASS-Syntax und SCSS-Syntax

Dieser Artikel erklärt die SASS-Syntax und die SCSS-Syntax.

Wir erklären ausführlich die Unterschiede zwischen der SASS- und der SCSS-Syntax und geben konkrete Beispiele, um Ihr Verständnis zu vertiefen.

YouTube Video

SASS-Syntax und SCSS-Syntax

SASS ist eine Stylesheet-Sprache, die entwickelt wurde, um die Möglichkeiten von CSS zu erweitern. SASS verfügt über zwei Syntaxvarianten. Dies sind die SASS-Syntax und die SCSS-Syntax.

Überblick über SASS und SCSS

SASS-Syntax

Die SASS-Syntax wird wie folgt geschrieben:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• Eine einrückungsbasierte Syntax, die keine geschweiften Klammern {} oder Semikolons ; verwendet.
• Sie ist darauf ausgelegt, einen prägnanten und leicht lesbaren Code zu schreiben.
• Die Dateiendung ist .sass.

SCSS-Syntax

Die SCSS-Syntax wird wie folgt geschrieben:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• Eine CSS-ähnliche Syntax, die geschweifte Klammern {} und Semikolons ; verwendet.
• Sehr kompatibel mit bestehendem CSS-Code – CSS kann direkt in eine SCSS-Datei umgewandelt werden.
• Die Dateiendung ist .scss.

Hauptunterschiede zwischen SASS und SCSS

Auswahlkriterien

Welche Variante verwendet wird, hängt von den Anforderungen des Projekts und des Teams ab.

• Wann sollte man die SASS-Syntax wählen?

  • Mit der SASS-Syntax kann man kompakten und sauberen Code schreiben.
  • Wenn das gesamte Team mit der SASS-Syntax vertraut ist, ist dies eine geeignete Wahl.

• Wann sollte man die SCSS-Syntax wählen?

  • Wenn die Kompatibilität mit CSS wichtig ist und viele Teammitglieder mit CSS vertraut sind, ist die SCSS-Syntax besser geeignet.

Vorteile von SASS und SCSS

Die folgenden Vorteile gelten gleichermaßen für die SASS- und SCSS-Syntax:.

1. Verwendung von Variablen

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• Mit Variablen können Sie einen Stil an einer Stelle definieren und ihn an mehreren Stellen wiederverwenden. Designänderungen können durch einfaches Ändern der Variablenwerte überall übernommen werden, was die Wartbarkeit verbessert.

2. Mixins

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• Mixins ermöglichen es, Stile oder vendor-spezifischen Code, der an mehreren Stellen verwendet wird, zu gruppieren und mit Argumenten flexibel anzuwenden. Dies reduziert die Code-Duplikation und verbessert die Wartbarkeit.

3. Verschachtelte Regeln

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• Durch Verschachtelung können Sie Stile hierarchisch entsprechend der HTML-Struktur schreiben, wodurch verwandte Regeln einfacher gruppiert werden können. Dies verbessert sowohl die Lesbarkeit als auch die Wartbarkeit des Codes.

4. Vererbung

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• Durch Vererbung können gemeinsame Stile gruppiert und wiederverwendet werden. Dies reduziert die Code-Duplikation und sorgt für ein konsistentes Design.

Fazit

Die Wahl zwischen SASS und SCSS hängt von den Vorlieben des Entwicklers und den Anforderungen des Projekts ab.

Die SASS-Syntax legt Wert auf Einfachheit, während die SCSS-Syntax auf CSS-Kompatibilität setzt. Beide Syntaxvarianten sind leistungsfähig und können die Produktivität bei der Arbeit mit CSS erheblich steigern.

Die Wahl der für Ihr Projekt am besten geeigneten Variante ermöglicht ein effizientes Management der Stylesheets.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video