SASS Schnellstart – If-Statements

Du weißt wahrscheinlich schon, dass Sass bedingte Anweisungen über die @if und @else Directives zur Verfügung stellt. Sofern du keine allzu komplexe Logik in deinem Code hast, gibt es keinen Bedarf für bedingte Anweisungen in deinen alltäglichen Stylesheets. Eigentlich gibt es sie hauptsächlich für Bibliotheken und Frameworks.

Wie auch immer, wenn du sie jemals brauchen solltest, beachte bitte die folgenden Richtlinien:

• Keine Klammern, außer sie sind notwendig;
• Immer eine leere neue Zeile vor @if;
• Immer ein Zeilenumbruch nach der öffnenden Klammer({);
• @else Anweisungen auf der gleichen Zeile wie die vorherige schließende Klammer(}).
• Immer eine leere neue Zeile nach der letzten schließenden Klammer(}), außer die nächste Zeile ist eine schließende Klammer(}).

@if $support-legacy {
   // … 
} @else { 
   // …
}
// Ungültig
@if ($support-legacy == true) { 
   // … 
} @else { 
   // … 
}

Wenn du auf einen falschen Wert testest, verwende immer das Schlüsselwort not, anstatt gegen false oder null zu testen.

@if not index($list, $item) {
  // …
}

// Ungültig
@if index($list, $item) == null {
  // …
}

Setze den variablen Teil immer auf die linke Seite der Anweisung und das (un)erwartete Ergebnis auf die rechte Seite. Umgekehrte bedingte Anweisungen sind oft schwieriger zu lesen, besonders für unerfahrene Entwickler.

@if $value == 42 {
  // …
}

// Ungültig
@if 42 == $Wert { 
   // … 
}

Wenn du bedingte Anweisungen innerhalb einer Funktion verwendest, um ein anderes Ergebnis basierend auf einer Bedingung zurückzugeben, stelle immer sicher, dass die Funktion immer noch eine @return-Anweisung außerhalb eines bedingten Blocks hat.

@function dummy($condition) {
  @if $condition {
    @return true;
  }
  @return false;
}

// Ungültig
@function dummy($condition) {
   @if $condition {
      @return true;
}
   @else {
      @return false;
   }
}

Soviel zu If-Statements in SASS. In der nächsten Lektion geht es um Schleifen.