Lerne X in Y Minuten

//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
   und gibt diesen zurück. */

@function calculate-percentage($target-size, $parent-size) {
  @return $target-size / $parent-size * 100%;
}

$main-content: calculate-percentage(600px, 960px);

.main-content {
  width: $main-content;
}

.sidebar {
  width: calculate-percentage(300px, 960px);
}

/* Kompiliert: */

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}



/* Extend (Vererbung)
============================== */



/* Extend ist ein Weg um Eigenschaften eines Selektoren mit einem anderem
   zu teilen. */

.display {
    @include size(5em, 5em);
    border: 5px solid $secondary-color;
}

.display-success {
    @extend .display;
    border-color: #22df56;
}

/* Kompiliert: */
.display, .display-success {
  width: 5em;
  height: 5em;
  border: 5px solid #51527F;
}

.display-success {
  border-color: #22df56;
}

/* Aufgrund der Art wie Sass die Klassen zusammen gruppiert, welche
   alle das gleiche Grund-Styling haben, ist Extend der Erstellung
   eines Mixins vorzuziehen. Wenn dies mit einem Mixin gemacht worden
   wäre, würden width, height und border für jedes Element dupliziert
   werden, welches das Mixin aufruft. Dies beeinflusst zwar nicht
   deinen Workflow, bläht aber die vom Sass-Compiler erzeugten Dateien
   unnötige auf. */



/* Nesting (Verschachtelung)
============================== */



/* Sass erlaubt es Selektoren in Selektoren zu verschachteln. */

ul {
    list-style-type: none;
    margin-top: 2em;

    li {
        background-color: #FF0000;
    }
}

/* '&' wird durch den übergeordneten Selektor ersetzt. */
/* Du kannst auch Pseudo-Klassen verschachteln. */
/* Denk daran, dass zu viel Verschachtelung deinen Code schlechter
   wartbar macht.
   Die Best Practices empfehlen nicht mehr als 3 Ebenen zu verschachteln.
   Zum Beispiel: */

ul {
    list-style-type: none;
    margin-top: 2em;

    li {
        background-color: red;

        &:hover {
          background-color: blue;
        }

        a {
          color: white;
        }
    }
}

/* Kompiliert: */

ul {
  list-style-type: none;
  margin-top: 2em;
}

ul li {
  background-color: red;
}

ul li:hover {
  background-color: blue;
}

ul li a {
  color: white;
}



/* Partials und Imports
============================== */



/* Sass erlaubt dir das Erstellen partieller Dateien (partials).
   Das hilft dir modularisierten Sass Code zu schreiben.
   Partielle Dateien fangen mit einem '_' an, z.B. _reset.css.
   Partielle Dateien werden nicht zu CSS generiert. */

/* Schau dir folgendes CSS an, was wir in einer Datei namens _reset.css haben */

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* Mit @import kannst du in Sass partielle Dateien importieren.
   Dies unterscheidet sich vom traditionellen CSS @import Statement
   welches einen neuen HTTP Request macht, um die zu importierende Datei
   zu holen. Sass nimmt die importierte Datei und kombiniert sie mit
   dem kompilierten Code. */

@import 'reset';

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}

/* Kompiliert: */

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}



/* Platzhalter Selektoren
============================== */



/* Platzhalter sind nützlich, um ein CSS Statement zum Erweitern zu
   erstellen. Wenn du ein CSS Statement erstellst, welches du ausschließlich
   zur Verwendung mit @extend nutzen willst, kannst du das mit einem
   Platzhalter tun. Platzhalter fangen mit einem '%' statt einem '.'
   oder '#' an und erscheinen nicht im kompilierten CSS. */

%content-window {
  font-size: 14px;
  padding: 10px;
  color: #000;
  border-radius: 4px;
}

.message-window {
  @extend %content-window;
  background-color: #0000ff;
}

/* Kompiliert: */

.message-window {
  font-size: 14px;
  padding: 10px;
  color: #000;
  border-radius: 4px;
}

.message-window {
  background-color: #0000ff;
}



/* Mathematische Operationen
============================== */



/* Sass bietet die folgenden Operatoren: +, -, *, /, und %. Diese können
   nützlich sein, wenn du Werte direkt in Sass berechnen willst, anstatt
   vorher manuell errechnete Werte zu verwenden. Unten folgt ein Beispiel
   für ein einfaches zweispaltiges Design. */

$content-area: 960px;
$main-content: 600px;
$sidebar-content: 300px;

$main-size: $main-content / $content-area * 100%;
$sidebar-size: $sidebar-content / $content-area * 100%;
$gutter: 100% - ($main-size + $sidebar-size);

body {
  width: 100%;
}

.main-content {
  width: $main-size;
}

.sidebar {
  width: $sidebar-size;
}

.gutter {
  width: $gutter;
}

/* Compiles to: */

body {
  width: 100%;
}

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}

.gutter {
  width: 6.25%;
}