Difference between CSS, SCSS & SASS

The syntax of SCSS or SASS is quicker to write then CSS. With nesting the syntax is better to read and easier to change code using variables.

Sample code CSS:

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

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

#header a {
  text-decoration: none;
}

Sample code SCSS:

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

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

  a {
    text-decoration: none;
  }
}

Sample code SASS:

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

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

  a
    text-decoration: none