Sass ist eine CSS-erweiternde Sprache, welche Features wie Variablen, Verschachtelung, Mixins und mehr hinzufügt.
Sass (und andere Präprozessoren wie [Less](http://lesscss.org/)) helfen Entwicklern dabei ihren Code wartbar und DRY (Don't Repeat Yourself - wiederhole dich nicht) zu schreiben.
Sass hat zwei verschiedene Syntax-Optionen. SCSS, mit der gleichen Syntax wie CSS aber mit den zusätzlichen Features von Sass. Oder Sass (die originale Syntax), welche Einrückung statt geschweiften Klammern und Semikolons benutzt.
Dieses Tutorial wurde mit SCSS geschrieben.
Wenn du bereits mit CSS3 vertraut bist, wirst du dir Sass relativ schnell aneignen. Es bietet keine neuen Styling-Eigenschaft, sondern Werkzeuge mit denen du dein CSS effizienter schreiben kannst und die Wartung viel einfacher machst.
```scss
//Einzeilige Kommentare werden entfernt, wenn Sass zu CSS kompiliert wird.
/* Mehrzeilige Kommentare bleiben bestehen. */
/* Variablen
============================== */
/* Du kannst einen CSS-Wert (wie eine Farbe) in einer Variable speichern.
Benutze das '$'-Zeichen um eine Variable zu erstellen. */
$primary-color: #A3A4FF;
$secondary-color: #51527F;
$body-font: 'Roboto', sans-serif;
/* Du kannst die Variablen überall in deinem Stylesheet verwenden.
Wenn du nun eine Farbe ändern willst, musst du das nur einmal tun. */
body {
background-color: $primary-color;
color: $secondary-color;
font-family: $body-font;
}
/* Das wird kompiliert zu: */
body {
background-color: #A3A4FF;
color: #51527F;
font-family: 'Roboto', sans-serif;
}
/* Dies ist viel besser wartbar als die Farbe
an jeder Stelle im Stylesheet einzeln ändern zu müssen. */
/* Mixins
============================== */
/* Wenn du merkst, dass du den gleichen Code für mehr als ein
Element schreiben musst, kannst du ihn in einem mixin speichern.
Dazu benutzt du '@mixin' plus einem Namen für dein mixin. */
@mixin center {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
/* Du kannst das mixin mit '@include' und dem Namen des mixin benutzen. */
div {
@include center;
background-color: $primary-color;
}
/* Das kompiliert zu: */
div {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
background-color: #A3A4FF;
}
/* Du kannst Mixins benutzen, um shorthand Eigenschaften zu erstellen. */
@mixin size($width, $height) {
width: $width;
height: $height;
}
/* Diese kannst du aufrufen und width und height als Parameter übergeben. */
.rectangle {
@include size(100px, 60px);
}
.square {
@include size(40px, 40px);
}
/* Compiles to: */
.rectangle {
width: 100px;
height: 60px;
}
.square {
width: 40px;
height: 40px;
}
/* Funktionen
============================== */
/* Sass bietet Funktionen, welche benutzt werden können um eine Reihe
von Aufgaben zu bewältigen. Berücksichtige das Folgende: */
/* Funktionen können aufgerufen werden indem du ihren Namen benutzt
und die benötigten Parameter übergibst. */
body {
width: round(10.25px);
}
.footer {
background-color: fade_out(#000000, 0.25)
}
/* Kompiliert: */
body {
width: 10px;
}
.footer {
background-color: rgba(0, 0, 0, 0.75);
}
/* Du kannst auch deine eigenen Funktionen definieren. Funktionen ähneln
Mixins. Wenn du zwischen Funktionen und Mixins auswählen musst, denke
daran, dass Mixins am besten zur Generierung von CSS eignen, während
Funktionen besser für Logik in deinem Sass Code genutzt werden. Die
Beispiele mit in der Sektion "Mathematische Operatoren" sind ideale
Kandidaten für wiederverwendbare Funktionen. */
/* Diese Funktion errechnet den Prozentwert aus target-size und parent-size
Hast du dich jemals gefragt, ob Sass ein Akronym ist oder nicht? Hast du wahrscheinlich nicht, aber ich sage es dir trotzdem. Der Name der Sprache ist ein Wort, "Sass", und kein Akronym.
Da die Leute durchgehend "SASS" geschrieben haben, hat der Ersteller der Sprache es scherzhaft "Syntactically Awesome StyleSheets" genannt.
## Sass üben
Wenn du mit Sass in deinem Browser spielen willst, schau dir [SassMeister](http://sassmeister.com/) an.
Du kannst beide Syntax-Optionen benutzen, gehe einfach in die Einstellungen und wähle entweder Sass oder SCSS.
## Kompatibilität
Sass kann in jedem Projekt verwendet werden, solange du ein Programm hast, um es in CSS zu kompilieren.
Du solltest verifizieren, dass das CSS, was du verwendest, mit deinen Ziel-Browsern kompatibel ist.
[QuirksMode CSS](http://www.quirksmode.org/css/) und [CanIUse](http://caniuse.com) sind gute Resourcen um die Kompatibilät zu überpüfen.
