Introducción a Sass

Lo que debe saber

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

  • HTML
  • CSS

Si desea aprender estos temas primero, consulte en nuestro Página principal Visite estos tutoriales.

¿Qué es Sass?

  • Sass se refiere a Syntactically Awesome Stylesheet (hojas de estilo con una gramática genial)
  • Sass es una extensión de CSS
  • Sass es un preprocesador CSS
  • Sass es compatible con todas las versiones de CSS
  • Sass reduce la repetición de CSS, ahorrando tiempo
  • Sass fue diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum en 2006
  • Sass se puede descargar y usar de manera gratuita

¿Por qué usar Sass?

Las hojas de estilo se vuelven cada vez más grandes, más complejas y más difíciles de mantener. Aquí es donde los preprocesadores CSS pueden ayudar.

Sass le permite usar características que no existen en CSS, como variables, reglas anidadas, mixins, importaciones, herencia, funciones integradas y otras características.

Un ejemplo simple pero útil sobre Sass

Supongamos que tenemos un sitio web con tres colores principales:

#a2b9bc
#b2ad7f
#878f99

Entonces, ¿cuántas veces necesita escribir estos valores HEX? Muchas veces. ¿Y si cambia el mismo color?

Puede escribir el siguiente código en Sass en lugar de escribir varias veces el valor anterior:

Ejemplo de Sass

/* Definir variables para el color original */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Usar variables */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Por lo tanto, al usar Sass, si el color original cambia, solo necesita cambiarlo en un lugar.

¿Cómo funciona Sass?

El navegador no entiende el código Sass. Por lo tanto, necesita un preprocesador Sass para convertir el código Sass en CSS estándar.

Este proceso se llama transcripción (transpiling). Por lo tanto, necesita proporcionar código Sass al transcriptor (un programa) y luego recuperar código CSS.

Consejo:La transcripción es un término utilizado para convertir/cambiar código fuente escrito en un lenguaje a otro lenguaje.

Tipo de archivo Sass

La extensión de archivo de archivos Sass es ".scss".

Comentarios Sass

Sass admite comentarios CSS estándar /* comentario */Además, también admite comentarios en línea // comentario:

Ejemplo de Sass

/* Definir colores principales */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Usar variables */
.main-header {
  background-color: $primary_1; // Puede agregar comentarios en línea aquí
}