Sass

Es la sigla de "Syntactically Awesome Style Sheets". Sass es una extensión de las hojas de estilo en cascada (CSS), el lenguaje utilizado para definir el diseño y el formato de los documentos HTML. Utiliza una sintaxis CSS totalmente compatible, pero ofrece funciones adicionales, como variables CSS y reglas anidadas, que hacen que CSS sea más eficiente y fácil de editar.

Una de las desventajas del CSS estándar es que no admite variables. Por ejemplo, si tiene varios estilos del mismo color, debe definir el color por separado para cada estilo. Si decide cambiar el color, debe cambiarlo en cada instancia del documento CSS. Con Sass, puede definir el color como una variable y asignar la variable a cada estilo que la utilice. Si decide cambiar el color, solo necesita hacerlo una vez: donde se define inicialmente en el documento.

El siguiente ejemplo muestra cómo definir y utilizar una variable CSS en Sass.

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

Sass también admite reglas anidadas, lo que permite a los desarrolladores escribir código más eficiente. En el siguiente ejemplo, la clase .button está anidada dentro del estilo #top p.

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

Cuando se compila, el código anterior produce el siguiente CSS:

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

Aunque Sass ofrece varias ventajas para los desarrolladores web, los documentos Sass no son reconocidos por los navegadores web. Por lo tanto, primero se debe compilar un archivo Sass en CSS antes de utilizarlo en un documento HTML. Esto puede hacerse localmente antes de cargar el CSS en el servidor web mediante programas como Compass.app o Koala. También puede compilarse en el servidor mediante un script de PHP o Ruby que compile Sass en CSS.