Tutorial de LESS: Divide y vencerás
Llegando ya al final de este tutorial de 6 entregas (mas bonus), tras la explicación de funciones en LESS, hoy toca explicar el «Divide and Conquer» (qué bien suena en inglés) o Divide y vencerás.
Plan de vuelo
- Introducción.
- El uso de variables.
- Los Mixins.
- Reglas necesarias.
- Funciones.
- Divide y vencerás.
Sobre Divide y vencerás
Divide y vencerás hace referencia a un refrán que implica resolver un gran problema (o un problema dificil) en varios problemas más pequeños y de menor dificultad.
En palabras de Wikipedia:
En la cultura popular, divide y vencerás hace referencia a un refrán que implica resolver un problema difícil, dividiéndolo en partes más simples tantas veces como sea necesario, hasta que la resolución de las partes se torna obvia. La solución del problema principal se construye con las soluciones encontradas.
Y nos quedamos con esto, porque la aplicación tecnológica del refrán no viene mucho al caso en LESS.
Configurando nuestro espacio de trabajo
Aunque esto ya es cuestión de gustos, yo siempre organizo mis maquetas igual:
- Carpeta para imágenes editables (ficheros de photoshop, illustrator…)
- Carpeta para imágenes definitivas (las que conforman el diseño web)
- Carpeta para ficheros LESS.
- Carpeta para ficheros CSS.
Después de entender esto, que es importante para la organización, vamos a meternos en cómo modularizar el proyecto con los ficheros LESS.
Unos pocos ficheros LESS
El primer fichero LESS que voy a crear será el encargado de «juntar» todo los ficheros que conformen el proyecto; style.less. Será el que se compile para formar el style.css y actuará como raíz de todo el proyecto.
Es importante recordar que los comentarios en LESS están precedidos por dos barras (//) y que no se compilan en el fichero CSS final. Los comentarios CSS (/* y */) sí son compilados.
Lo normal sería comenzar el fichero style.less con los datos del proyecto, información que nos será útil a posteriori para identificar correctamente la estructura de estos archivos y, por qué no, el proyecto en sí.
// Style.less para el tutorial de DarioBF.com // ---------------------------------------- /* Proyecto creado para enseñar LESS en dariobf.com Versión 1.0 Creado por Darío BF - www.dariobf.com Estos comentarios sí se mostrarán en el fichero CSS final. */ |
No hace falta explicar demasiado aquí, son datos básicos de cualquier proyecto.
El siguiente paso, sería crear más ficheros LESS para conformar nuestro proyecto. Por ejemplo, se me ocurre que si utilizamos un framework (por ejemplo 320 and up) empecemos a enlazar ficheros clave de él.
Por ejemplo, podemos meter el archivo reset.less que trae el framework del ejemplo y que nos ayudará en la creación del sitio:
// Style.less para el tutorial de DarioBF // ---------------------------------------- /* Proyecto creado para enseñar LESS en DarioBF.com Versión 1.0 Creado por Darío BF - www.dariobf.com Estos comentarios sí se mostrarán en el fichero CSS final. */ @import "reset.less"; |
Previamente hemos introducido dicho fichero en nuetra carpeta de LESS.
Seguramente ya has visto por dónde van los tiros en cuanto a la modularización, ¿verdad? Te permite agilizar tu trabajo, ya que tienes un fichero reset a tu disposición para cada proyecto. No necesitas buscar uno nuevo cada vez que empiezas un proyecto. Simplemente… ¡Importas tu reset.less!
Algunos archivos LESS útiles
Siguiendo el ejemplo anterior, yo utilizo los siguientes ficheros LESS que me agilizan bastante el proceso de creación de un front-end nuevo.
variables.less
// Variables del proyecto LESS // --------------------------- // Porque son sólo variables // No necesito agregar comentarios CSS // Este código sólo será compilado // en otras partes de tu código // Colores // ------- @red: #CF142B; @blue: #00214D; @white: #FFF; @black: #000; @lighterGray: #DDD; @lightGray: #AAA; @darkGray: #888; @darkerGray: #222; // Fuentes // ------- @baseFont: Helvetica, Arial, sans-serif; @baseFontSize: 14px; @baseLineHeight: 21px; |
tipografias.less
// Tipografías // ----------- /* Tipografias básicas para el proyecto de LESS */ body { font-family: @baseFont; font-size: @baseFontSize; line-height: @baseLineHeight; } |
Una vez creados estos dos ficheros LESS, necesitamos importarlos a nuestro style.less inicial, que quedaría así:
// Style.less para el tutorial de DarioBF // ---------------------------------------- /* Proyecto creado para enseñar LESS en dariobf.com Versión 1.0 Creado por Darío BF - www.dariobf.com Estos comentarios sí se mostrarán en el fichero CSS final. */ //Importamos el reset @import "reset.less"; //Importamos las variables @import "variables.less"; //Importamos @import "tipografias.less"; |
Esto, al compilarse, nos generará un único fichero style.css con toda la información. Genial, ¿verdad?
Descargar ficheros de esta entrada [ZIP]
Si te ha gustado, no olvides compartirlo en las redes sociales y, si tienes dudas, comenta aquí abajo.
