En esta ocasión me dispuse a trabajar en un proyecto para una aplicación web utilizando el famoso pre-procesador SASS (para hojas estilo de cascada) y algo de HTML5 para su maquetación.
En sí el propósito de este post, es dar a conocer una excelente forma de aplicar SASS en proyectos posteriores y comprender más acerca de la funcionalidad del mismo.
Requisitos para el proyecto:
- Conocimientos de HTML5 y CSS3 – AMPLIOS
- Conocimientos de la Estructura Semántica de HTML5 – BÁSICOS
- Conocimientos sobre Diseño de aplicaciones (en especial Responsive Design) – BÁSICOS
- Conocimientos del pre-procesador SASS – BÁSICOS O CASI NULOS (No se requiren ).
NOTA: Si no cuentas con SASS instalado en tu ordenador no te preocupes!!, en html5facil.com ya contamos con una guía de instalación muy completa para cualquiera de los distintos sistemas operativos (Windows, Linux y Mac).
Bueno, sin más que decir comencemos nuestro proyecto. 🙂
Para iniciar vamos a crear una carpeta que contendrá todos los archivos de nuestro proyecto. En mi caso yo tengo una carpeta donde guardo todos mis proyectos así que me voy a posicionar en ese directorio.
Una vez posicionado creamos la carpeta para el proyecto, yo la nombraré “SASS-Project01” (ustedes pueden nombrarla de cualquier forma, no hay ningún problema).
Hecho esto, lo siguiente es abrir la carpeta con nuestro IDE favorito, en mi caso yo utilizaré Sublime Text, ya que es muy rápido y práctico a la hora de escribir código en él, aunque sin duda alguna ustedes pueden utilizar el entorno que más les agrade.
En este proyecto únicamente vamos a crear 2 archivos con el IDE, uno para el HTML (Archivo: index.html), y otro para generar los estilos CSS con SASS el cual tendrá una extensión “.scss” (archivo: style.scss). Hasta el momento los archivos de nuestro proyecto y del entorno se verá de la siguiente forma:
TRABAJANDO CON SASS DESDE LA TERMINAL
Como ya sabrán aquellos que ya han trabajado con SASS, se necesita de la terminal de comandos para poder generar los archivos “.css”, que contendrán los estilos CSS en un determinado formato y orden.
En SASS se trabaja de la siguiente forma:
sass –watch entrada.scss:salida.css
- Sass – indica que haremos uso del pre-procesador SASS
- –watch – este comando en particular hará que SASS procese el código en tiempo de desarrollo.
- Entrada.scss – indica cual será el archivo de entrada.
- : – sirve para indentificar cual será el archivo de salida.
- Salida.css – y finalmente éste, indicará cual será el archivo de salida, o mejor dicho el archivo generado con los estilos CSS procesados por SASS.
De igual forma, para dar mejor a entender el comando, se puede ejemplificar de la siguiente manera:
sass –watch archivo_entrada.scss:archivo_salida.css
NOTA: Para conocer todos los parametros que recibe SASS, ejecuta en la terminal el comando:
sass –help
Importante: No es obligatorio trabajar con SASS desde la terminal, una de las opciones es utilizar SCOUT que permite gestionar los archivos .scss y .css desde una fácil y sencilla interfaz gráfica.
Véase en el artículo: Guía básica de instalación de SASS
FORMATOS
Un tema muy importante al desarrollar grandes aplicaciones es el formato en el que se obtendrán los archivos .css, esto debido a que cada uno le dará distinta utilidad a su código.
Exiten 4 tipos de formatos:
- nested (formato por defecto)
- compact (compacto)
- compressed (comprimido)
- expanded (expandido)
Para este proyecto decidí utilizar el formato “expanded”, ya que este sencillo proyecto será de código abierto y al finalizarlo la lectura del código generado será mucho más fácil para aquellos desarrolladores que quieran echar un vistazo.
Un mansaje así, tendrá que salir en la terminal:
>>> Sass is watching for changes. Press Ctrl-C to stop.
Bien, una vez explicado esto es hora de codear. 😀
¿Qué les parece si iniciamos con un navbar para el diseño? Algo parecido a esto:
Si visualizamos esto en nuestro navegador, se verá de la siguiente manera:
Nota importante: Cometí un pequeño error al cerrar la etiqueta “li” como se puede ver en la pantalla entre la lista “Tutoriales” y “Cursos”, por motivos de tiempo y organización del post no pude corregir esa impresión de pantalla. Espero puedan notar ese error en el código HTML y corregirlo, es algo sencillo.
Bien, ahora regresemos a lo importante, como ya saben una vez que ejecutamos el comando desde la terminal SASS, estará esperando en tiempo real cuando se realice algún cambio en el archivo “style.scss”, por lo que cualquier nuevo cambio actualizará el archivo generado “style.css”.
Sabiendo esto, es necesario agregar la hoja estilo de cascada generada por SASS a nuestro documento de HTML:
Listo, aunque el archivo “style.css” aun no se ha generado debemos tenerlo agregado de una vez en nuestro documento, puesto que es el archivo de salida que nos servirá para maquetar nuestra aplicación.
Ahora veamos algo de código en SASS:
Cómo podrán ver, el código en SASS es un poco diferente a como se trabaja directamente en CSS; sin embargo, este es un sencillo ejemplo, puesto que SASS nos permite hacer bastantes cosas que CSS no puede lograr, entre ellas:
- Evitar escribir varias veces el mismo código
- Darle uniformalidad y buena presentación a nuestras aplicaciones
- Editar propiedades fácilmente desde las variables
- La creación de mixins
- El uso de directivas del pre-procesador SASS
- Y principalmente el ahorro de horas de trabajo en el desarrollo de aplicaciones web.
Luego de esta importante explicación vamos a visualizar cómo quedó este sencillo ejemplo en nuestro navegador:
Los estilos se han agregado en el documento HTML de la manera esperada, podemos continuar con los estilos del navbar:
VARIABLES
Como habrán notado estoy haciendo uso de funciones y variables distintas a las establecidas en un principio cuando se creó el archivo “style.scss”, es por eso que, a continuación se muestra la ubicación de las principales variables que estaremos utilizando durante este proyecto.
NOTA: La declaración de variables se encuentra en el mismo archivo “style.scss” justo en la parte del inicio.
Ahora podremos darnos cuenta la estructura de nuestros estilos y una de las formas en las que podemos utilizar SASS logrando un código ordenado y limpio.
IMPORTANTE: En el uso de pre-procesadores siempre es una excelente idea declarar los colores principales para el diseño, ya que en algún momento será necesario cambiar la estructura de colores en el diseño de la aplicación (sólo modificando el valor de las variables, así no se cambiarán las propiedades de cada clase o elemento que se deseé cambiar) una por una.
Ya hemos visualizado la declaración de las variables, pero como vimos en la imagen de nuestro código en SASS, aún falta ver eso que la mayoría conoce en un lenguaje de programación como funciones.
