Que es SASS

SASS es el mejor ayudante para el desarrollador web a la hora de trabajar en CSS gracias a sus múltiples funcionalidades: mixins, variables, funciones, herencia, nesting.

Sass es un pre-procesadores CSS.

Un preprocesador CSS es una herramienta que nos permite generar, de manera automática, hojas de estilo, añadiéndoles características que no tiene CSS, y que son propias de los lenguajes de programación, como pueden ser variables, funciones, selectores anidados, herencia, etcétera , los cuales nos permiten aumentar las capacidades que nos brinda el CSS plano.

Sass te ofrece la posibilidad de dividir el código CSS en varios archivos , lo que es muy útil porque el código CSS suele ser muy extenso.

SCSS es un preprocesador de CSS que se utiliza para mantener su CSS más organizado y conciso. Proporciona herramientas como mixins , variables y funciones (en SCSS se denominan miembros ) y le permite anidar sus estilos. Los navegadores no pueden leer SCSS, por lo que su código debe pasar por un proceso de empaquetado antes de enviarse al navegador como CSS simple.

Aunque técnicamente no es un problema disponer de un fichero muy grande, a la hora de editar el código se hace complicado y lento localizar el lugar exacto donde tienes cada estilo que quieras tocar. Por eso es muy interesante tener el código dividido en distintos ficheros, de modo que, cuando quieres modificar algo de tu sitio, sabes perfectamente dónde están esos estilos y puedes localizarlos rápidamente, ya que nuestros archivos tendrán muy poco código. 

1) ¿Qué hace potente a SASS?

La principal ventaja de SASS es la posibilidad de convertir los CSS en algo dinámico. Permite trabajar mucho más rápido en la creación de código con la posibilidad de crear funciones que realicen ciertas operaciones matemáticas y reutilizar código gracias a los mixins, variables que nos permiten guardar valores. SASS.

2) ¿Cómo funciona?

Extension  .sass

El primero en salir fue la extension  .sass y se caracteriza, al igual que Stylus y coffeescript para el lenguaje de programación Javascript.

No hace uso de llaves ni punto y coma final, en busca de la simplicidad y eliminación de ruido.

body
background: #000
font-size: 62.5%

Extension .scss 

Los .scss salieron con la versión 3 de preprocesador y permiten utilizar llaves e incorporar código de CSS clásico.

body {
background: #000;
font-size: 62.5%;
}

3) Compilar nuestros archivos en formato CSS

Como hemos dicho, nuestro archivo .scss y .sass no lo puede interpretar directamente el navegador, por lo que se tiene que convertir a la extensión CSS. 

4) Como unir los archivos Sass (.scss y .sass) a uno solo

@ import '_menu';
@ import '_botones';
@ import '_footer';

Debemos tener un archivo principal en el cual los importaremos a todos los que queramos que compilen. Hay que tener cuidado en el orden en el que se importan. Recordar que es muy importante esto en CSS.

5) ¿Cuál es la diferencia entre las reglas @ import y @use SCSS?

@use '_styles.scss'; 
@ import '_styles.scss';

Actualización de julio de 2022:

con el tiempo  @ import quedara obsoleto

En vista del hecho de que LibSass quedó en desuso antes de agregar soporte para el nuevo sistema de módulos, el cronograma para dejar en desuso y eliminar @ import se retrasó. Ahora tenemos la intención de esperar hasta que el 80 % de los usuarios utilicen Dart Sass (medido por descargas de npm) antes de desaprobar @ import, y esperar al menos un año después de eso y probablemente más antes de eliminarlo por completo.