Introducción a Sass

Lo que ya deberías saber

Antes de continuar, debe tener una comprensión básica de lo siguiente:

  • HTML
  • CSS

Qué es Sass

  • Sass significa Syntactically Awesome Stylesheet
  • Sass es una extensión de CSS
  • Se trata de un pre-procesador CSS
  • Sass es completamente compatible con todas las versiones de CSS
  • Sass reduce la repetición de CSS y, por lo tanto, ahorra tiempo
  • Sass fue diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum en 2006
  • Sass es gratis para descargar y usar

Por qué usar Sass

Las hojas de estilo son cada vez más grandes, más complejas y más difíciles de mantener. Aquí es donde un preprocesador de CSS puede ayudar. Sass permite usar funciones que no existen en CSS, como variables, reglas anidadas, mezclas, importaciones, herencia, funciones integradas y otras cosas.

Ejemplo sencillo con Sass

Imaginemos que tenemos un sitio web con tres colores principales:

Entonces, ¿cuántas veces necesita escribir esos valores HEX? Muchas veces. ¿Y las variaciones de los mismos colores?. En lugar de escribir los valores anteriores muchas veces, puede usar Sass y escribir esto:

/* DEFINIENDO VARIABLES PARA LOS COLORES PRIMARIOS */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* USAMOS LAS VARAIBLES */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

Por lo tanto, cuando usas Sass y el color primario cambia, solo necesitas cambiarlo en un lugar.

¿Cómo funciona Sass?

Un navegador no entiende el código Sass. Por lo tanto, necesitarás un preprocesador Sass para convertir el código Sass en CSS estándar. Este proceso se denomina transpilado. Por lo tanto, debes proporcionarle a un transpilador (algún tipo de programa) un código Sass y luego recuperar un código CSS.

Consejo: Transpilar es un término para tomar un código fuente escrito en un idioma y transformarlo/traducirlo a otro idioma.

Tipo de extensión

Los archivos Sass tienen la extensión .scss.

Comentarios en Sass

Sass admite comentarios CSS estándar /* comentario */ y, además, admite comentarios en línea // comentario.

Ejm

/* DEFINIMOS COLORES PRIMARIOS */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */
.main-header {
  background-color: $primary_1; // AQUI PONEMOS UN COMENTARIO EN LINEA
}