SASS | Introducción

Sass es la forma abreviada de Syntactically Awesome Style Sheet. Es una actualización de las hojas de estilo en cascada (CSS). Sass es un preprocesador de CSS. Es totalmente compatible con todas las versiones de CSS. Sass reduce la repetición de CSS y por lo tanto ahorra tiempo. Fue diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum en 2006. La descarga y el uso de Sass son gratuitos.

Requisitos previos: 

• HTML
• CSS

Funciona: un navegador web no entiende el código Sass en sí. Es por eso que necesitará un preprocesador Sass para cambiar los códigos Sass en CSS estándar simple. 
El proceso anterior se conoce como transpiling . Por lo tanto, se le pedirá que proporcione al transpilador algunos códigos Sass y luego, a cambio, obtenga algunos códigos CSS.
Nota: transpilar es el término utilizado para tomar una entrada de código fuente de un idioma y traducirla a una salida de otro idioma.
Tipo de archivo: todos los archivos Sass deben tener la extensión de archivo «.scss».
Comentarios: Sass admite los comentarios CSS estándar «/* comentario */», y junto con eso también admite comentarios en línea «// comentario».
Ejemplo: 
 

/* Define fonts using variables */
$font_1: Algerian;
$font_2: Times New Roman;
 
.main {
    font: $font_1;
}

Esto daría como resultado la siguiente salida CSS: 
 

/* Define fonts using variables */
.main {
    font: Algerian;
}

Requisitos del sistema e instalación de SASS: 
 

• Sistema operativo: Sass es independiente de la plataforma.
• Compatibilidad con navegadores: no podemos usar SASS de forma nativa en los navegadores. Para usar SASS:

1. Instale herramientas como sass.js en el lado del cliente.
2. Use transpiler como node-sass, dart-sass para transpilar archivos .scss en un archivo .css.

• Lenguaje de programación: Sass está basado en Ruby.

Para obtener más información sobre Sass y su instalación, visite el sitio web oficial de Sass https://sass-lang.com/  
Un ejemplo básico de Sass. Supongamos que un sitio web tiene básicamente 3 fuentes en todas partes. Será un desastre si tiene que escribir el mismo estilo de fuente una y otra vez. En lugar de escribir valores de fuente, una y otra vez, puede usar el siguiente Sass. 
Ejemplo: 
 

$font_1: Algerian;
$font_2: Times New Roman;
$font_3: Serif;
  
.main  {
    font: $font_1;
}
  
.menu-1 {
    font: $font_2;
}
  
.menu-2 {
    font: $font_3;
}

Esto daría como resultado la siguiente salida CSS: 
 

.main {
    font: Algerian;
}

.menu-1 {
    font: Times New Roman;
}

.menu-2 {
    font: Serif;
}