Sass vs. LESS vs. Stylus: Preprozessor-Shootout

Die wahre Kraft eines CSS-Präprozessors zu nutzen, ist ein Abenteuer.  Es gibt unzählige Sprachen, Syntaxen und Funktionen, die alle sofort einsatzbereit sind.

In diesem Artikel werden die verschiedenen Funktionen und Vorteile der Verwendung von drei verschiedenen Präprozessoren (Sass, LESS und Stylus) behandelt.

Einführung

Präprozessoren erzeugen CSS, das in allen Browsern funktioniert.

CSS3-Präprozessoren sind Sprachen, die ausschließlich zu dem Zweck geschrieben wurden, coole, einfallsreiche Funktionen zu CSS hinzuzufügen, ohne die Browserkompatibilität zu beeinträchtigen.  Sie tun dies, indem sie den Code, den wir schreiben, in reguläres CSS kompilieren, das in jedem Browser bis in die Steinzeit verwendet werden kann.  Es gibt Tausende von Funktionen, die Präprozessor an den Tisch bringen, und in diesem Artikel werden wir einige der publizierten und einige der nicht so publizierten Funktionen behandeln.  Lass uns anfangen.

Syntax

Der wichtigste Teil beim Schreiben von Code in einem CSS-Präprozessor ist das Verstehen der Syntax.  Glücklicherweise ist (oder kann) die Syntax für alle drei Präprozessoren mit regulärem CSS identisch.

Sass & LESS

Sass und LESS verwenden beide die Standard-CSS-Syntax.  Dies macht es extrem einfach, eine vorhandene CSS-Datei in einen der beiden Präprozessoren zu konvertieren.  Sass verwendet die Dateierweiterung .scss und LESS die Erweiterung .less.  Die grundlegende Sass- oder LESS-Datei kann wie folgt eingerichtet werden:

1

/* style.scss or style.less */

2

h1 {

3

  color: #0982C1;

4

}

Wie Sie vielleicht schon bemerkt haben, handelt es sich hierbei lediglich um ein reguläres CSS, das sich sowohl in Sass als auch in LESS perfekt zusammenstellt.

Es ist wichtig zu wissen, dass Sass auch eine ältere Syntax hat, die Semikola und geschweifte Klammern weglässt. Obwohl dies immer noch vorhanden ist, ist es alt und wir werden es nach diesem Beispiel nicht mehr verwenden.  Die Syntax verwendet die Dateierweiterung .sass und sieht folgendermaßen aus:

1

/* style.sass */

2

h1

3

  color: #0982c1

Stylus

Die Syntax für Stylus ist viel ausführlicher.  Mit der Dateierweiterung .styl akzeptiert Stylus die Standard-CSS-Syntax, akzeptiert jedoch auch einige andere Variationen, bei denen Klammern, Doppelpunkte und Semikolons optional sind.  Zum Beispiel:

1

/* style.styl */

2

h1 {

3

  color: #0982C1;

4

}

5

6

/* omit brackets */

7

h1

8

  color: #0982C1;

9

10

/* omit colons and semi-colons */

11

h1

12

  color #0982C1

Die Verwendung verschiedener Variationen im selben Stylesheet ist ebenfalls gültig, daher werden die folgenden ohne Fehler kompiliert.

1

h1 {

2

  color #0982c1

3

}

4

h2

5

  font-size: 1.2em

Variablen

Variablen können im gesamten Stylesheet deklariert und verwendet werden.  Sie können einen beliebigen Wert haben, bei dem es sich um einen CSS-Wert handelt (z. B. Farben, Zahlen [Einheiten] oder Text.). Sie können überall in unserem Stylesheet referenziert werden.

Sass

Sass-Variablen werden mit dem $ -Symbol vorangestellt und der Wert und der Name werden wie bei einer CSS-Eigenschaft durch ein Semikolon getrennt.

1

$mainColor: #0982c1;

2

$siteWidth: 1024px;

3

$borderStyle: dotted;

4

5

body {

6

  color: $mainColor;

7

  border: 1px $borderStyle $mainColor;

8

  max-width: $siteWidth;

9

}

LESS

LESS-Variablen sind genau die gleichen wie Sass-Variablen, außer den Variablennamen wird das @ -Symbol vorangestellt.

1

@mainColor: #0982c1;

2

@siteWidth: 1024px;

3

@borderStyle: dotted;

4

5

body {

6

  color: @mainColor;

7

  border: 1px @borderStyle @mainColor;

8

  max-width: @siteWidth;

9

}

Stylus

Für Stiftvariablen müssen ihnen keine vorangestellten Werte hinzugefügt werden, obwohl das Symbol $ zulässig ist.  Das abschließende Semikolon ist wie immer nicht erforderlich, aber ein Gleichheitszeichen zwischen Wert und Variable ist vorhanden.  Zu beachten ist, dass Stylus (0.22.4) kompiliert wird, wenn das @ -Symbol einem Variablennamen vorangestellt wird, der Wert jedoch nicht angewendet wird, wenn darauf verwiesen wird.  Mit anderen Worten, mach das nicht.

1

mainColor = #0982c1

2

siteWidth = 1024px

3

$borderStyle = dotted

4

5

body

6

  color mainColor

7

  border 1px $borderStyle mainColor

8

  max-width siteWidth

Kompiliertes CSS

Jede der oben genannten Dateien wird in das gleiche CSS übersetzt.  Sie können Ihre Vorstellungskraft nutzen, um zu sehen, wie nützlich Variablen sein können.  Wir müssen nicht mehr eine Farbe ändern und müssen sie zwanzigmal erneut eingeben, oder möchten die Breite unserer Website ändern und müssen herumgraben, um sie zu finden.  Hier ist das CSS nach der Kompilierung:

1

body {

2

  color: #0982c1;

3

  border: 1px dotted #0982c1;

4

  max-width: 1024px;

5

}

Verschachtelung

Wenn in unserem CSS mehrere Elemente mit demselben übergeordneten Element referenziert werden müssen, kann es umständlich sein, das übergeordnete Element immer wieder zu schreiben.

1

section { 

2

  margin: 10px;

3

}

4

section nav { 

5

  height: 25px;

6

}

7

section nav a { 

8

  color: #0982C1;

9

}

10

section nav a:hover {

11

  text-decoration: underline;

12

}

Stattdessen können wir mit einem Präprozessor die untergeordneten Selektoren in die Klammern des übergeordneten Elements schreiben.  Das Symbol & verweist auf den übergeordneten Selektor.

Sass, LESS & Stylus

Alle drei Präprozessoren haben die gleiche Syntax für die Verschachtelung von Selektoren.

1

section {

2

  margin: 10px;

3

4

  nav {

5

    height: 25px;

6

7

    a {

8

      color: #0982C1;

9

10

      &:hover {

11

        text-decoration: underline;

12

      }

13

    }

14

  }

15

}

Kompiliertes CSS

Dies ist das kompilierte CSS aus dem obigen Code.  Es ist genau das gleiche wie zu Beginn - wie bequem!

1

section {

2

  margin: 10px;

3

}

4

section nav {

5

  height: 25px;

6

}

7

section nav a {

8

  color: #0982C1;

9

}

10

section nav a:hover {

11

  text-decoration: underline;

12

}

Mixins

Mixins sind Funktionen, die die Wiederverwendung von Eigenschaften in unserem Stylesheet ermöglichen.  Anstatt mehrmals durch unser Stylesheet zu gehen und eine Eigenschaft zu ändern, können wir sie jetzt einfach in unserem Mixin ändern.  Dies kann sehr nützlich sein, um Elemente und Herstellerpräfixe gezielt zu gestalten.  Wenn Mixins aus einem CSS-Selektor aufgerufen werden, werden die Mixin-Argumente erkannt und die Stile im Mixin werden auf den Selektor angewendet.

Sass

1

/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */

2

@mixin error($borderWidth: 2px) {

3

  border: $borderWidth solid #F00;

4

  color: #F00;

5

}

6

7

.generic-error {

8

  padding: 20px;

9

  margin: 4px;

10

  @include error(); /* Applies styles from mixin error */

11

}

12

.login-error {

13

  left: 12px;

14

  position: absolute;

15

  top: 20px;

16

  @include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/

17

}

LESS

1

/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */

2

.error(@borderWidth: 2px) {

3

  border: @borderWidth solid #F00;

4

  color: #F00;

5

}

6

7

.generic-error {

8

  padding: 20px;

9

  margin: 4px;

10

  .error(); /* Applies styles from mixin error */

11

}

12

.login-error {

13

  left: 12px;

14

  position: absolute;

15

  top: 20px;

16

  .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */

17

}

Stylus

1

/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */

2

error(borderWidth= 2px) {

3

  border: borderWidth solid #F00;

4

  color: #F00;

5

}

6

7

.generic-error {

8

  padding: 20px;

9

  margin: 4px;

10

  error(); /* Applies styles from mixin error */

11

}

12

.login-error {

13

  left: 12px;

14

  position: absolute;

15

  top: 20px;

16

  error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */

17

}

Kompiliertes CSS

Alle Präprozessoren kompilieren nach demselben Code:

1

.generic-error {

2

  padding: 20px;

3

  margin: 4px;

4

  border: 2px solid #f00;

5

  color: #f00;

6

}

7

.login-error {

8

  left: 12px;

9

  position: absolute;

10

  top: 20px;

11

  border: 5px solid #f00;

12

  color: #f00;

13

}

Erbe

Wenn Sie CSS auf altmodische Weise schreiben, können Sie den folgenden Code verwenden, um dieselben Stile auf mehrere Elemente gleichzeitig anzuwenden:

1

p,

2

ul,

3

ol {

4

  /* styles here */

5

}

Das funktioniert großartig, aber wenn wir die Elemente individuell weiter gestalten müssen, muss für jedes Element ein weiterer Selektor erstellt werden, der schnell unübersichtlich und schwieriger zu warten ist.  Um dem entgegenzuwirken, kann Vererbung verwendet werden.  Vererbung ist die Fähigkeit anderer CSS-Selektoren, die Eigenschaften eines anderen Selektors zu erben.

Sass & Stylus

1

.block {

2

  margin: 10px 5px;

3

  padding: 2px;

4

}

5

6

p {

7

  @extend .block; /* Inherit styles from '.block' */

8

  border: 1px solid #EEE;

9

}

10

ul, ol {

11

  @extend .block; /* Inherit styles from '.block' */

12

  color: #333;

13

  text-transform: uppercase;

14

}

Kompiliertes CSS (Sass & Stylus)

1

.block, p, ul, ol {

2

  margin: 10px 5px;

3

  padding: 2px;

4

}

5

p {

6

  border: 1px solid #EEE;

7

}

8

ul, ol {

9

  color: #333;

10

  text-transform: uppercase;

11

}

LESS

LESS unterstützt nicht wirklich erbliche Stile wie Sass und Stylus.  Anstatt mehrere Selektoren zu einem Satz von Eigenschaften hinzuzufügen, behandelt es Vererbung wie ein Mixin ohne Argumente und importiert die Stile in ihre eigenen Selektoren.  Der Nachteil ist, dass die Eigenschaften in Ihrem kompilierten Stylesheet wiederholt werden.  So würden Sie es einrichten:

1

.block {

2

  margin: 10px 5px;

3

  padding: 2px;

4

}

5

6

p {

7

  .block; /* Inherit styles from '.block' */

8

  border: 1px solid #EEE;

9

}

10

ul, ol {

11

  .block; /* Inherit styles from '.block' */

12

  color: #333;

13

  text-transform: uppercase;

14

}

Kompiliertes CSS (WENIGER)

1

.block {

2

  margin: 10px 5px;

3

  padding: 2px;

4

}

5

p {

6

  margin: 10px 5px;

7

  padding: 2px;

8

  border: 1px solid #EEE;

9

}

10

ul,

11

ol {

12

  margin: 10px 5px;

13

  padding: 2px;

14

  color: #333;

15

  text-transform: uppercase;

16

}

Wie Sie sehen, wurden die Stile von .block in die Selektoren eingefügt, denen wir die Vererbung geben wollten.  Es ist wichtig zu wissen, dass Priorität hier zum Thema werden kann. Seien Sie also vorsichtig.

Importieren

In der CSS-Community ist das Importieren von CSS verpönt, da mehrere HTTP-Anforderungen erforderlich sind.  Das Importieren mit einem Präprozessor funktioniert jedoch anders.  Wenn Sie eine Datei aus einem der drei Präprozessoren importieren, wird der Import während des Kompilierens buchstäblich eingeschlossen, sodass nur eine Datei erstellt wird.  Beachten Sie jedoch, dass der Import von regulären .css-Dateien mit dem Standard @import "file.css"; kompiliert wird.  Code.  Mixins und Variablen können auch importiert und in Ihrem Stylesheet verwendet werden.  Das Importieren macht das Erstellen separater Dateien für die Organisation sehr lohnend.

Sass, LESS, & Stylus

1

/* file.{type} */

2

body {

3

  background: #EEE;

4

}

1

@import "reset.css";

2

@import "file.{type}";

3

4

p {

5

  background: #0982C1;

6

}

Kompiliertes CSS

1

@import "reset.css";

2

body {

3

  background: #EEE;

4

}

5

p {

6

  background: #0982C1;

7

}

Farbfunktionen

Farbfunktionen sind in Funktionen eingebaut, die beim Kompilieren eine Farbe transformieren.  Dies kann äußerst nützlich sein, um Farbverläufe, dunkle Schwebefarben und vieles mehr zu erstellen.

Sass

1

lighten($color, 10%); /* returns a color 10% lighter than $color */

2

darken($color, 10%);  /* returns a color 10% darker than $color */

3

4

saturate($color, 10%);   /* returns a color 10% more saturated than $color */

5

desaturate($color, 10%); /* returns a color 10% less saturated than $color */

6

7

grayscale($color);  /* returns grayscale of $color */

8

complement($color); /* returns complement color of $color */

9

invert($color);     /* returns inverted color of $color */

10

11

mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */

Dies ist nur eine kurze Liste der verfügbaren Farbfunktionen in Sass. Eine vollständige Liste der verfügbaren Sass-Farbfunktionen finden Sie in der Sass-Dokumentation.

Farbfunktionen können überall dort verwendet werden, wo eine Farbe gültiges CSS ist.  Hier ist ein Beispiel:

1

$color: #0982C1;

2

3

h1 {

4

  background: $color;

5

  border: 3px solid darken($color, 50%);

6

}

LESS

1

lighten(@color, 10%); /* returns a color 10% lighter than @color */

2

darken(@color, 10%);  /* returns a color 10% darker than @color */

3

4

saturate(@color, 10%);   /* returns a color 10% more saturated than @color */

5

desaturate(@color, 10%); /* returns a color 10% less saturated than @color */

6

7

spin(@color, 10);  /* returns a color with a 10 degree larger in hue than @color */

8

spin(@color, -10); /* returns a color with a 10 degree smaller hue than @color */

9

10

mix(@color1, @color2); /* return a mix of @color1 and @color2 */

Eine Liste aller LESS-Funktionen finden Sie in der LESS-Dokumentation.

Hier ist ein Beispiel für die Verwendung einer Farbfunktion in LESS:

1

@color: #0982C1;

2

3

h1 {

4

  background: @color;

5

  border: 3px solid darken(@color, 50%);

6

}

Stylus

1

lighten(color, 10%); /* returns a color 10% lighter than 'color' */

2

darken(color, 10%);  /* returns a color 10% darker than 'color' */

3

4

saturate(color, 10%);   /* returns a color 10% more saturated than 'color' */

5

desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */

Eine vollständige Liste aller Stylus-Farbfunktionen finden Sie in der Stylus-Dokumentation.

Hier ein Beispiel mit den Farbfunktionen des Stylus:

1

color = #0982C1

2

3

h1

4

  background color

5

  border 3px solid darken(color, 50%)

Operationen

Mathematik in CSS zu machen ist sehr nützlich und jetzt vollständig möglich.  Es ist einfach und so wird es gemacht:

Sass, LESS, & Stylus

1

body {

2

  margin: (14px/2);

3

  top: 50px + 100px;

4

  right: 100px - 50px;

5

  left: 10 * 10;

6

}

Praktische Anwendungen

Wir haben eine Menge der Funktionen und Neuerungen behandelt, die Vorverarbeiter tun können, aber wir haben nichts Praktisches oder Praktisches behandelt.  Hier eine kurze Liste realer Anwendungen, bei denen die Verwendung eines Präprozessors eine Rettung darstellt.

Hersteller-Präfixe

Dies ist einer der Gründe, warum Sie einen Präprozessor verwenden sollten, und das aus einem sehr guten Grund - es spart Zeit und Tränen.  Das Erstellen eines Mixins zur Handhabung von Herstellerpräfixen ist einfach und erspart viel Wiederholung und mühsames Bearbeiten.  So geht's:

Sass

1

@mixin border-radius($values) {

2

  -webkit-border-radius: $values;

3

     -moz-border-radius: $values;

4

          border-radius: $values;

5

}

6

7

div {

8

  @include border-radius(10px);

9

}

LESS

1

.border-radius(@values) {

2

  -webkit-border-radius: @values;

3

     -moz-border-radius: @values;

4

          border-radius: @values;

5

}

6

7

div {

8

  .border-radius(10px);

9

}

Stylus

1

border-radius(values) {

2

  -webkit-border-radius: values;

3

     -moz-border-radius: values;

4

          border-radius: values;

5

}

6

7

div {

8

  border-radius(10px);

9

}

Kompiliertes CSS

1

div {

2

  -webkit-border-radius: 10px;

3

     -moz-border-radius: 10px;

4

          border-radius: 10px;

5

}

3D Text

Das Vorstellen von 3D-Text mit mehreren text-shadows ist eine clevere Idee.  Das einzige Problem ist, dass das Ändern der Farbe danach schwierig und mühsam ist.  Mit Mixins und Farbfunktionen können wir 3D-Text erstellen und die Farbe im laufenden Betrieb ändern!

Sass

1

@mixin text3d($color) {

2

  color: $color;

3

  text-shadow: 1px 1px 0px darken($color, 5%),

4

               2px 2px 0px darken($color, 10%),

5

               3px 3px 0px darken($color, 15%),

6

               4px 4px 0px darken($color, 20%),

7

               4px 4px 2px #000;

8

}

9

10

h1 {

11

  font-size: 32pt;

12

  @include text3d(#0982c1);

13

}

LESS

1

.text3d(@color) {

2

  color: @color;

3

  text-shadow: 1px 1px 0px darken(@color, 5%),

4

               2px 2px 0px darken(@color, 10%),

5

               3px 3px 0px darken(@color, 15%),

6

               4px 4px 0px darken(@color, 20%),

7

               4px 4px 2px #000;

8

}

9

10

span {

11

  font-size: 32pt;

12

  .text3d(#0982c1);

13

}

Stylus

1

text3d(color)

2

  color: color

3

  text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000

4

span

5

  font-size: 32pt

6

  text3d(#0982c1)

Ich entschied mich dafür, die text-shadows in eine Zeile zu schreiben, da ich die geschweiften Klammern weggelassen habe.

Kompiliertes CSS

1

span {

2

  font-size: 32pt;

3

  color: #0982c1;

4

  text-shadow: 1px 1px 0px #097bb7, 

5

               2px 2px 0px #0875ae, 

6

               3px 3px 0px #086fa4, 

7

               4px 4px 0px #07689a, 

8

               4px 4px 2px #000;

9

}

Endresultat

Säulen

Die Verwendung von Zahlenoperationen und Variablen für Spalten ist eine Idee, auf die ich gekommen bin, als ich zum ersten Mal mit CSS-Präprozessoren spielte.  Durch das Deklarieren einer gewünschten Breite in einer Variablen können Sie diese leicht und ohne Nachdenken ändern.  So wird's gemacht:

Sass

1

$siteWidth: 1024px;

2

$gutterWidth: 20px;

3

$sidebarWidth: 300px;

4

5

body {

6

  margin: 0 auto;

7

  width: $siteWidth;

8

}

9

.content {

10

  float: left;

11

  width: $siteWidth - ($sidebarWidth+$gutterWidth);

12

}

13

.sidebar {

14

  float: left;

15

  margin-left: $gutterWidth;

16

  width: $sidebarWidth;

17

}

LESS

1

@siteWidth: 1024px;

2

@gutterWidth: 20px;

3

@sidebarWidth: 300px;

4

5

body {

6

  margin: 0 auto;

7

  width: @siteWidth;

8

}

9

.content {

10

  float: left;

11

  width: @siteWidth - (@sidebarWidth+@gutterWidth);

12

}

13

.sidebar {

14

  float: left;

15

  margin-left: @gutterWidth;

16

  width: @sidebarWidth;

17

}

Stylus

1

siteWidth = 1024px;

2

gutterWidth = 20px;

3

sidebarWidth = 300px;

4

5

body {

6

  margin: 0 auto;

7

  width: siteWidth;

8

}

9

.content {

10

  float: left;

11

  width: siteWidth - (sidebarWidth+gutterWidth);

12

}

13

.sidebar {

14

  float: left;

15

  margin-left: gutterWidth;

16

  width: sidebarWidth;

17

}

Kompiliertes CSS

1

body {

2

  margin: 0 auto;

3

  width: 1024px;

4

}

5

.content {

6

  float: left;

7

  width: 704px;

8

}

9

.sidebar {

10

  float: left;

11

  margin-left: 20px;

12

  width: 300px;

13

}

Bemerkenswerte Macken

Bei der Verwendung eines CSS-Präprozessors gibt es einige Macken.  Ich werde ein paar der lustigen besprechen, aber wenn Sie wirklich daran interessiert sind, alle zu finden, empfehlen wir Ihnen, die Dokumentation zu durchforsten oder, besser noch, einen Präprozessor in Ihrer täglichen Codierung zu verwenden.

Fehler melden

Wenn Sie CSS für eine anständige Zeit geschrieben haben, sind Sie sicher an einem Punkt angelangt, an dem Sie irgendwo einen Fehler hatten und ihn einfach nicht finden konnten.  Wenn Sie wie ich sind, haben Sie wahrscheinlich den Nachmittag damit verbracht, Ihre Haare herauszuziehen und verschiedene Dinge zu kommentieren, um den Fehler zu finden.

CSS-Präprozessoren melden Fehler. Es ist einfach so einfach. Wenn mit Ihrem Code etwas nicht stimmt, erfahren Sie, wo und wann Sie Glück haben: warum.  Sie können diesen Blogbeitrag lesen, wenn Sie wissen möchten, wie Fehler in den verschiedenen Präprozessoren gemeldet werden.

Bemerkungen

Beim Kompilieren mit einem CSS-Präprozessor wird ein doppelter Schrägstrichkommentar entfernt (z. B. //comment), und ein Slash-Sternchen-Kommentar bleibt erhalten (z. B. /* comment */).  Verwenden Sie den doppelten Schrägstrich für Kommentare, die Sie auf der nicht kompilierten Seite möchten, und den Schrägstrich (Stern) für Kommentare, die nach der Kompilierung sichtbar sein sollen.

Nur eine Anmerkung: Wenn Sie minimierte kompilieren, werden alle Kommentare entfernt.

Fazit

Jeder CSS-Präprozessor, den wir behandelt haben (Sass, LESS und Stylus), verfügt über eine eigene Methode, um dieselbe Aufgabe zu erfüllen. Entwickler können damit nützliche, nicht unterstützte Funktionen nutzen, während die Browserkompatibilität und die Sauberkeit des Codes erhalten bleiben.

Preprozessoren sind zwar keine Voraussetzung für die Entwicklung, können jedoch viel Zeit sparen und verfügen über sehr nützliche Funktionen.

Ich möchte Sie alle dazu ermutigen, so viele Präprozessoren wie möglich zu testen, damit Sie effektiv einen Favoriten auswählen können und wissen können, warum er den zahlreichen anderen vorgezogen wird.  Wenn Sie noch nicht mit einem Präprozessor versucht haben, Ihr CSS zu schreiben, empfehle ich Ihnen dringend, es auszuprobieren.

Haben Sie eine Lieblings-CSS-Präprozessor-Funktion, die ich nicht erwähnt habe?  Kann man etwas tun, was ein anderer nicht kann?  Lass es uns in den Kommentaren wissen!

Ein besonderer Dank geht an Karissa Smith, eine super talentierte Freundin von mir, die das Vorschaubild für diesen Artikel erstellt hat.