#It’s Frontend Friday – Wie SASS dein Projekt besser machen kann

Eine Möglichkeit sich hier das Leben leichter zu machen, ist SASS (Syntactically Awesome Style Sheets). SASS ist eine CSS Präprozessor Skript Sprache die CSS um Funktionalitäten wie Variablen, Mixins oder Operatoren erweitert. Des Weitern kann die Verwendung von SASS zu einer besseren Lesbarkeit des Codes beitragen.

SASS gibt es in zwei Syntaxvarianten, die durch unterschiedliche Datei-Endungen gekennzeichnet sind *.scss und *.sass. Letzteres ist weniger verbreite, Indent-basiert und verwendet keine Klammern oder Semikolons. Im Folgenden werden für alle Beispiele der .scss Syntax verwendet.

Variablen

Durch Variablen stehen wiederverwendbare Werte zu Verfügung, wodurch man den Style der Anwendung deutlich vereinheitlichen kann, Redundanzen verringern, den Code sauberer und organisierter hält und außerdem einfacher Änderungen an der Farbpalette, Schriftart oder anderen Styling Elementen vornehmen kann.

Variablen könne ganz einfach im styles.scss definiert werden oder in einer separaten Datei (z.B. variables.scss) die dann in die styles.scss oder dort wo sie benötigt wird importier werden kann um auf die Variablen zuzugreifen.

$primary-color: #00759e;
$success-color: #28a745;
$error-color: #dc3545;
$text-color: #ffffff;
$border-color: #cccccc;

// Verwendung 
.h1 { color: $primary-color}

@mixin

Ein Mixin ist wiederverwendbarer Code der in andere Selektoren eingebunden werden kann. Mixins können Parameter annehmen um Werte dynamisch zu verändern und ermöglichen so eine einfache Definition wiederkehrender Elemente.

// Mixin
@mixin message($bg-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 5px 5px;
  font-size: 14px;
}

//Verwendung des Mixin für die Defenition von Buttons
.div{
  &.standard {
    @include message($primary-color);
  }

  &.warning{
    @include message($warning-color);
  }

  &.error {
    @include message($error-color);
  }
}

// Verwendung in der Komponente
<div>
  <div class="btn standard">This is a Standard Message</div>
  <div class="btn success">This is a Warning Message</div>
  <div class="btn error">Thi is an Error Message</div>
 </div>

@extend

@extend ermöglicht es den Style aus einer anderen Klasse zu übernehmen und ist am ehesten als Vererbung zu beschreiben.  Das verhindert Redundanzen und verbessert die Wartbarkeit. Vererbung in SASS ermöglicht es, gemeinsame Styles durch die Direktive @extend von einer bestehenden (Basis-)Klasse zu übernehmen. Dadurch können mehrere Selektoren einen Style teilen, ohne dass redundanter Code geschrieben werden muss, was die Stylesheets kürzer und wartbarer macht.

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: $primary-color;
}

.button-submit  {
  @extend .button-basic;
  background-color: $success-color;
  color: white;
}

Verschachtelung

Verschachtelung ist ein Feature dass vor allem die Lesbarkeit und verbessert und identische Code Zeile verhindert indem Style Regeln  verschachtelt werden können, die einem übergeordneten Element zugeordnet werden können.

// SCSS
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }

// CSS
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Operatoren

SASS unterstützt eine Reihe an Operatoren. Dazu gehören mathematische Operatoren (+, -, *, /, %),  Vergleichsoperatoren (==, !=, >, < , >=, <=),  logische Operatoren (and, or, not) sowie String Operatoren (Konkatenation (+) und Subtraktion (-)). Mit diesen Operatoren kann man ein Stylesheet sehr einfach dynamisch anpassen. Ein großer Vorteil dabei ist, dass man den Style anhand von Bedingungen setzten kann, wie hier im Beispiel Code.

@mixin spacing($padding, $margin) {
      @if ($padding > $margin) {
          padding: $padding;
      } @else {
          padding: $margin;
      }  
  }

Funktionen

Mit Funktionen lassen sich Berechnungen oder Formeln innerhalb des Projektes immer wieder verwenden. Auch hier verbessert sich die Lesbarkeit des Codes, Redundanzen werden verhindert und die Wartbarkeit des Codes verbessert. Eine Funktion kann Argumente entgegennehmen und hat genau einen Rückgabewert.

@function sum($number1, $number2) {
  @return $number2 + $number2
}

.box1 {
  padding: sum(5px, 10px);
}

 

Überlegt euch beim nächsten Projekt ob ihr von SASS profitieren würdet. Übrigens unser Living-Stylguide verwendet auch SASS ;)¹