SASS - Presentación para diseño de interfaces web

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:

Qué es SASS

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.

Elementos de SASS

Los elementos básicos de SASS son los siguientes:

  • Variables.
  • Anidamiento de reglas y propiedades.
  • Módulos.
  • Mixins.
  • Herencia.

Aunque dentro de cada una de estas secciones se puede profundizar largo y tendido.

Información sobre SASS

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.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram