Los preprocesadores CSS son herramientas que traducen un código de hojas de estilo no estándar y específico a un código CSS estándar. Ahorran tiempo de desarrollo y su trabajo es bastante escalable. Ofrecen utilidades como variables, funciones, anidación…

Sass es el prepocesador más demandado y utilizado por frameworks y desarrolladores, aunque hay otros como Stylus o Less.

Sobre la sintaxis

Dando por sentado que conocemos la sintaxis de CSS, podemos resumir:

La sintaxis de SCSS es muy similar a de nuestro viejo amigo CSS. De hecho, el código CSS es también SCSS perfectamente válido. Mas SCSS nos permite hacer más cosas.

La sintaxis de Sass es un poco diferente a la de CSS. Por ejemplo: No se usan llaves, sino que se indenta el código, y no se colocan puntos y coma al final de las líneas.

Crear proyecto con SCSS con Angular-cli

En la anterior entrada, creamos un proyecto con CSS, explicando que podíamos renombrar el archivo para convertirlo a SCSS. También podemos hacerlo desde la consola de comandos, con a siguiente línea:

ng new nombre-proyecto --style=scss

Una vez que nuestra consola nos ha informado de que el módulo se instalo con éxito, estamos listos para el siguiente paso.

Fuentes de consulta

Hemos consultado las siguientes fuentes:

https://desarrolloweb.com/articulos/que-es-sass-usar-sass.html