Proyecto final del Curso de Fundamentos de Sass de platzi💚 impartido por la profesora Ana Maria Díaz

Sass es un procesador 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.

Estas características de los procesadores nos permiten, además, que el CSS que se genera sea más fácil de mantener y más reutilizable.

• Reduce el tiempo para crear y mantener el CSS.

• Permite tener una organización modular de los estilos, lo cual es vital para proyectos grandes.

• Proporciona estructuras avanzadas propias de los lenguajes de programación, como variables, listas, funciones y estructuras de control.

• Permite generar distintos tipos de salida, comprimida, normal o minimizada, trabajando tanto en desarrollo como en producción, además se hace una forma muy fácil.

• Permite vigilar los ficheros, de tal manera que, si ha habido un cambio en la hoja de estilos, se regenera automáticamente (modo watch).

• Tiene muy pocas dependencias, sobre todo la nueva versión, que es dart-sass. En las anteriores versiones se dependía de muchas librerías de Ruby y era un poco engorroso de instalar, pero con la nueva versión, la instalación es muy fácil.

• Existen muchas herramientas asociadas, muchas librerías hechas con Sass y una comunidad muy importante de usuarios.

• Hay que aprender a utilizar una nueva herramienta, lo que para algunos supone una desventaja.

• Hay un tiempo de consumo en el proceso de generación o compilación del CSS, sobre todo si es el archivo SCSS es muy grande. No es mucho tiempo, pero sí que existe esa pequeña demora.

• Tiene una sintaxis más compleja que CSS.

• ¿Qué es SASS y en qué se diferencia de otros preprocesadores?
• ¿Cómo funcionan los preprocesadores? Ventajas de utilizar uno

• Anatomía de un proyecto de SASS e instalación y configuración del entorno de trabajo

• Estructura de la hoja de estilos y variables
• Uso de selectores, scope de las variables y shadowing
• Creando la estructura del proyecto
• At Rules: CSS y nesting

• Expresiones: Literales y Operaciones

• Creando la estructura de la sección main

• ¿Qué es la herencia y cómo funciona en SASS?
• Creando la estructura de la sección de Cuidado de la Salud y Decoración del Hogar
• Usando flexbox en la sección de Cuidado de la Salud y Decoración del Hogar

• ¿Qué es un mixin en CSS?
• Implementando mixins en el proyecto

• Creación de nuestras propias funciones

• Creando la estructura de la sección '¿Por qué nosotros?
• Creando la estructura de la sección Galería de Estilos
• Creando la estructura de la sección Mapa y Footer

• Presentación de Github pages y deploy

• Aprende a instalar y configurar Sass mediante Node.js