Variables

Wie du bereits weißt, sind Variablen Elemente, die einen bestimmten Wert zu einer bestimmten Zeit haben. Der Wert einer Variablen kann sich während der Ausführung eines Skripts ändern. Gleiches gilt auch hier, man kann, zum Beispiel, eine Farbe als Variable definieren und statt jedes Mal den HEX-Code zu schreiben, einfach dieses Objekt verwenden. Bei umfassenden Web-Projekten, kann doppelter CSS-Code das Leben schwer machen. Variablen helfen dabei, doppelten Code zu reduzieren. Dadurch wird es viel leichter komplexen CSS zu verwalten. Beispiel:

$farbe-rot: #ff0000
$farbe-blau: #0000ff
$farbe-gruen: #00ff00

#element {
 font-size: 12px
 color: $farbe-rot
}

Du brauchst keine großen Kenntnisse, um den Code zu verstehen. Für SASS, ändern wir die Erweiterung von .css zu .scss, dann fügen wir den CSS-Code ein, und fertig, schon schreibst du SASS.

Nesting

Wenn du in der Web-Entwicklung arbeitest, wirst du verstehen, wie chaotisch und unorganisiert CSS am Ende eines Projekts wird. Du hast Hunderte Selektoren zur Auswahl und jeder hat seine eigenen Regeln. Die Nutzung eines CSS Präprozessoren, wird dir helfen, diesen Stress zu vermeiden. Wenn du an Nesting denkst, denk an HTML. Es ist eine visuelle Hierarchie, welche die Übersicht erhöht. Vorher:

.sidebar {
 float: right;
}

.sidebar h1 {
 font-size:24px;
 color: red;
}

.sidebar ul {
 width: 100%;
 margin: 0;
 padding: 0;
}

Nachher:

.sidebar {
 float: right;

  h1 {
   font-size: 24px;
   color: red;
  }

  ul {
   width: 100%;
   margin: 0;
   padding: 0;
  }

}

Mixins

Das ist eine Gruppe von Definitionen, die gemäß bestimmter Parameter oder statischen Regeln kompiliert wird. Sie werden beispielsweise häufig für Hintergrund Gradienten verwendet: Beispiel:

@mixin gradient($start-colour, $end-colour) {
   background-color: $start-colour;
   background-image: -webkit-gradient(linear, left top, left bottom, from($start-colour), to($end-colour));
   background-image: -webkit-linear-gradient(top, $start-colour, $end-colour);
   background-image: -moz-linear-gradient(top, $start-colour, $end-colour);
   background-image: -ms-linear-gradient(top, $start-colour, $end-colour);
   background-image: -o-linear-gradient(top, $start-colour, $end-colour);
   background-image: linear-gradient(top, $start-colour, $end-colour);
   filter: progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}');
}

body {
   @include gradient(#FFC107, #E91E63);
}

Demo: http://codepen.io/brandonhimpfen/pen/doreEN/

Extends

Extends bietet eine Möglichkeit, allgemeine Definition mehrfach zu nutzen, ohne sie zu kopieren. Extended-Selektoren sind in kompilierten CSS gruppiert. Es bietet die Möglichkeit, ein Styling einmal zu erstellen und dann einfach über @extend auf die spezifischen HTML-Codeblöcke anzuwenden, sodass sie das gewünschte Aussehen erhalten, das du willst.

.button { 
  border: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.red-button {
  @extend .button;
  background: red;
  color: white; 
}

If / Else Statements

Das ist für weiter fortgeschrittene und für kleine Projekte wahrscheinlich gar nicht notwendig, aber IF-Bedingungen sind nützlich, wenn dein Code an bestimmte Voraussetzungen geknüpft sein soll. Dies bietet Flexibilität, um die benötigte Logik zu schreiben, die du brauchst.

Loops

Der @for Loop wiederholt einen Codeblock für eine bestimmte Anzahl (n)-Mal, vom Startindex bis zu dem letzten Index. Die grundlegende Syntax für diese Schleife ist: Beispiel:

$colors: red, orange, yellow, green, blue, purple;

@for $i from 1 through length($colors) {
  li:nth-child(#{length($colors)}n+#{$i}) {
    background: nth($colors, $i)
  }
}

Demo: http://codepen.io/cimmanon/pen/yoCDG Loops sind wichtig und auch nicht schwer, und macht SASS mehr zu einer richtigen Programmiersprache.

Math

Manchmal kann Mathe im CSS nützlich sein. Du kannst verschiedene Operatoren wie Plus, Minus, Subtrahieren, Prozentsätze für eine Vielzahl von spezifischen Fällen nutzen.

Import

Das ist auch möglich, ohne einen CSS-Präprozessor dabei zu verwenden,. Die Idee ist, den Code in mehrere CSS-Dateien zu aufzuteilen und diesen dann in eine Haupt CSS-Datei importieren. Beispiel:

@import “bootstrap”;
@import “reset”;

Die Installation kann beängstigend und schwierig sein, aber die Features sind den Versuch wert, denn sie ermöglichen es, Code zu schreiben, der sowohl leichter zu schreiben als auch später leichter zu pflegen ist. Du hast die Möglichkeit, Variablen und Funktionen zu erstellen und es ist einfacher, deine Projekt zu pflegen und schnell Änderungen vorzunehmen, wie Farben, Breiten und andere Regeln, ohne dabei in der gesamten CSS Datei zu suchen.

Wie man anfängt?

Wenn ich dich neugierig gemacht habe, oder wenn ich dich schon überzeugt habe, fragst du dich, wo du anfangen oder wie du starten sollst. Es gibt ein paar CSS Präprozessor Sprachen, wie SASS, LESS, Stylus, die du wählen kannst. https://github.com/showcases/css-preprocessors