Diferencias entre CSS y SCSS – Preprocesador SASS

Para poder explicar la diferencia entre CSS y SCSS, debemos empezar por explicar qué es SASS.

Sass (Syntactically Awesome Stylesheets) 

Es un metalenguaje de hoja de estilos. Basado en SassScript, que es un lenguaje de script simple.

Este es un lenguaje de script que es traducido a CSS.
Y muchos lo definen como CSS con superpoderes. 
El intérprete de SASS traduce el código a CSS

En SASS tenemos dos sintaxis .sass y .scss 

CSS : es un lenguaje de hojas de estilo, sirve para organizar la presentación y aspecto de una página web, ya sea en un ordenador / computadora, un móvil / celular, una Tablet, etc

SCSS: Es la sintaxis de CSS pero con todas las ventajas de SASS.

La sintaxis de SCSS a diferencia de la sintaxis de Sass usa archivos con extensión .scss, a pesar de esto nos provee de las mismas características.

Variables, nesting (anidamiento), mixins, y herencia de los selectores.

Esta sintaxis suele ser la más utilizada ya que es muy parecida a la sintaxis de CSS.

Un ejemplo de sintaxis en SCSS sería:

@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}