Sass es un lenguaje de estilos que nos permite llevar el maquetado a otro nivel. ¿Pero qué tanto nos ofrece?, en esta entrada quiero hablarles sobre las ventajas que aun ofrece utilizar este preprocesador.
¿Qué es un preprocesador?
Es un programa que nos permite generar CSS a partir de una sintaxis particular (este proceso se llama compilar), en este caso el metalenguaje en cuestión sería SASS, pero existen otros como Less y Stylus.
La compilación se puede hacer por consola, o con otros programas que nos facilitan la tarea como Prepros o Koala pero en esta entrada también explicaré como hacerlo de una manera mas sencilla.
¿Por que aprender SASS?
Syntactically Awesome Stylesheets es un meta-lenguaje de CSS que nos habilita diferentes herramientas para facilitar nuestro trabajo a la hora de maquetar una web. Si tuviera que nombrar algunas ventajas serian las siguientes:
- La sintaxis es mucho mas legible y si vienes de algún lenguaje de programación se te puede hacer muy familiar.
- Es mucho mas fácil poder manejar la especificidad, la cascada y la herencia.
- Reduce el tiempo para poder mantener y crear CSS.
Y también, como todo tiene sus desventajas, que listaría de la siguiente manera:
- Existe un tiempo de demora para que se pueda compilar el archivo SASS y después otro para generar el CSS.
- Se debe aprender una nueva herramienta, lo cual supone para algunos, un esfuerzo mayor.
¿Por que es tan especial SASS?
Para ver todo lo que nos ofrece SASS existe en su sitio la documentación completa, en este post quiero hablarte de las que para mi son las mas relevantes en mi día a día.
1: Variables y listas
No es tan complicado, con SASS tenemos la oportunidad de tener variables a las cuales se les puede asignar un valor.
Igualmente se puede hacer solo con CSS pero en SASS también podemos almacenar listas, que en su caso serian como un arreglo en programación.
Podemos almacenar en estos valores: píxeles, colores, booleanos, etc.
2: Anidamiento
La primer funcionalidad que conocí y por la cual empece a utilizar SASS fue por el anidamiento de selectores.
Esto nos ayuda a no repetir el selector y agruparlo de una manera mas legible. Al momento de utilizar media querys puede ser bastante útil.
También tenemos con SASS el Parent Selector (&) para referirnos al selector padre.
3: Extends
Extend puede resumirse a lo que es la herencia para programar, este nos permite reutilizar ciertas reglas en CSS y así evitamos duplicar código.
La principal razón de estas herramientas es el evitar tanto CSS repetido en nuestro proyecto.
4: Funciones
Al igual que los extends, las funciones en SASS intentan ser familiares con un lenguaje de programación, y son eso: mediante argumentos, traer un valor esperado.
Las funciones pueden ser muy útiles ya que podemos esperar algun escenario en nuestro sitio y actuar, evitando hacer CSS para cada uno.
5: Debugging
Para acelerar la visualizacion de problemas, SASS nos trae la posibilidad de de realizar un debug en nuestro CSS. Esto funciona como un console.log de javascript.
Podemos ver el valor que devuelve nuestro CSS según el escenario en donde estemos y así validar todo mas rápidamente.
Conclusiones
Con esto termino con la entrada de hoy, si tienes alguna duda siempre puedes entrar a la documentación oficial. Estos puntos que eh mencionado son para mi los mas destacados pero existen muchos mas para agilizar tu trabajo como frontend.