Unterschied zwischen CSS, SCSS & SASS

Durch SCSS oder SASS wird die Schreibweise von CSS vereinfacht und Variablen fest definiert. Hierdurch ist eine übersichtlichere Darstellung, weniger Schreibarbeit und eine einfachere Überarbeitung durch die Verwendung von Variablen gewährleistet.

Beispielcode CSS:

#header {
  margin: 0;
  border: 1px solid red;
}

#header p {
  font-size: 12px;
  font-weight: bold;
  color: red;
}

#header a {
  text-decoration: none;
}

Beispielcode SCSS:

$colorRed: red;
#header {
  margin: 0;
  border: 1px solid $colorRed;

  p {
    color: $colorRed;
    font: {
      size: 12px;
      weight: bold;
    }
  }

  a {
    text-decoration: none;
  }
}

Beispielcode SASS:

$colorRed: red
#header
  margin: 0
  border: 1px solid $colorRed

  p
    color: $colorRed
    font:
      size: 12px
      weight: bold

  a
    text-decoration: none