Seguimos con los contenidos del módulo de Diseño de interfaces web del ciclo de grado superior de Desarrollo de Aplicaciones Web, y en esta ocasión os hablaré de SASS, un preprocesador CSS que se utiliza cada vez más en los proyectos de desarrollo web y que permite hacer uso de variables y “programación” (entre comillas) para la creación de hojas de estilos.
Os dejo una pequeña presentación donde explico qué es SASS e incluyo pequeños ejemplos sobre los distintos tipos de elementos que ofrece y cómo se traducen a CSS:
Aunque las siglas se corresponden a “Syntactically Awesome StyleSheet”, se trata de un preprocesador libre y gratuito de CSS que es compatible con todas sus versiones y cuya función principal es ahorrar tiempo al programador evitando la duplicidad del código.
Trabajar con él es tan facil como hacerlo con una hoja de estilos: solo tenemos que coger un editor de código y escribir. Una vez hayamos desarrollado nuestro código SASS debemos procesarlo, o bien a través de un comando en nuestra consola, o a través de algún programa, como el caso de Scout-App, que es la aplicación que utilizamos nosotros en el aula. Se encarga de procesar el código, detectar errores si los hubiera, y generar el código CSS correspondiente.
Los elementos básicos de SASS son los siguientes:
Aunque dentro de cada una de estas secciones se puede profundizar largo y tendido.
En la web oficial de SASS podréis encontrar toda la información sobre este preprocesador: cómo instalarlo, aplicaciones externas, tutorial de SASS y mucho más.
Además, y como no podía ser de otra manera, W3Schools también ofrece un tutorial y una guía de referencia bastante completa para consultar.
¿Y vosotros, también habéis enseñado SASS a vuestro alumnado?
Consulta otros artículos sobre el módulo de Diseño de Interfaces Web.