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:

Introducción a SASS - Diseño de Interfaces Web (Desarrollo de Aplicaciones Web) from Laura Folgado Galache

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:

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.

El pasado martes fuimos a una de las charlas que organizó la Universidad de Cantabria ("Integración continua en proyectos Java usando Maven, Sonar y Jenkins") impartida por Rocío Muñoz (@roci_munoz).

Me quedé con el gusanillo de instalar Maven en un equipo Windows (porque en Mac aún no ha habido manera) y parece que lo conseguí, ¡porque funciona! Así que os dejo un pequeño tutorial, por si alguno se anima:

  1. En primer lugar, es necesario que tengamos instalado el JDK 1.7. en nuestro equipo. Para ello:
    • Accedemos a la web de Oracle y buscamos la versión que queramos. He elegido JDK 1.7 y no 1.8 porque el segundo da algunos problemas a la hora de integrar bases de datos.
    • Seguimos el asistente hasta el final... ya sabéis: siguiente, siguiente, siguiente...
    • Y configuramos las variables de entorno de Windows. Para ello hacemos clic con el botón derecho del ratón sobre Equipo > Propiedades > Configuración avanzada del sistema > pestaña Opciones avanzadas > botón Variables de entorno. Tenemos que añadir las siguientes:
      • CLASSPATH: C:\Program Files\Java\jdk1.7.0_79\jre
      • JAVA_HOME: C:\Program Files\Java\jdk1.7.0_79
      • PATH: ... ;C:\Program Files\Java\jdk1.7.0_79\bin; ... (en este caso, la variable PATH ya existirá, así que añadimos esa cadena a continuación de lo que haya, separada por 😉
    • Si todo está bien, al abrir un terminal (cmd.exe) y escribir "java -version" debería mostrar los datos de la versión instalada.
  2. Accedemos a la página web de Maven y descargamos la última versión (en mi caso, la 3.3.3): http://maven.apache.org/download.cgi#Installation
  3. Descomprimimos el archivo en C:/maven, de modo que todos los archivos de Maven se encontrarán en C:/maven/apache-maven-3.3.3
  4. Configuramos las variables de entorno al igual que lo hicimos en el caso anterior. En este caso añadiríamos:
    • M2: %M2_HOME%\bin
    • M2_HOME: C:\maven\apache-maven-3.3.3
    • PATH: ...;C:\maven\apache-maven-3.3.3\bin; ...
  5. Accedemos al terminal y escribirmos "mvn --version". Aseguraos de que el terminal no estaba abierto cuando cambiasteis las variables de sesión, porque entonces no reconocerá estas variables. Debéis cerrarlo y volverlo a abrir. Si todo está bien os mostrará la versión de Maven instalada.

En cualquier caso, si trabajáis con NetBeans podéis crear un proyecto de tipo Maven. En ese caso, y si Maven no está instalado, hace todo el proceso por nosotros, y solamente tenemos que encargarnos de configurarlo... pero eso ya lo dejo para otro post.

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