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
- 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
- 驴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