Tutorial de LESS: Funciones
Como en anteriores entregas adelantábamos llega el capítulo de este tutorial de LESS en el que explicaremos las funciones de LESS. Una de las cosas más útiles e importantes de LESS, por su utilidad.
Pero antes, vamos a darle un repaso al guión, para que conozcas nuestras entregas anteriores:
Plan de vuelo
*Disclaimer*: Te vas a ensuciar las manos con este tutorial… :-P
Ahora en serio, es posible que algunos conceptos no queden demasiado claros tras leer el tutorial, si es así deja un comentario abajo e intentaré aclarártelo.
¡Empezamos!
Operaciones
Como hay varios tipos de funciones y hay que empezar explicando alguna, voy a hacerlo por la más sencilla, las operaciones.
Aunque generalmente son separadas de las funciones, para mí lo son.
Una explicación rápida de qué son podría ser «matemáticas». Pero si nos metemos en una explicación un poco más larga, podemos decir que nos sirven para cambiar pixeles rápida y dinámicamente, porcentajes, ems, colores y mucho más sólo con una línea de código; de forma relativa a una línea inicial.
Vamos a preparar la escena del crimen…
Por ejemplo, digamos que estás creando un sitio web con WordPresspara un cliente y que estás trabajando modificando los estilos de la etiqueta blockquote. Quieres que la tipografía cambie de Helvetica a Georgia, se vuelva itálica (cursiva) y aumente un poquito su tamaño. Esto se podría hacer con las opciones de los temas de WordPress, desde el Dashboard; pero nosotros no queremos que los usuarios puedan cambiar el tamaño de fuente de la etiqueta Blockquote porque queremos que se mantenga proporcional al tamaño fuente base.
Espera, espera… ¿Me he explicado bien? Lee de nuevo el párrafo anterior si no lo has entendido del todo.
Bien, ahora que lo has entendido podemos seguir.
Para asignar el tamaño, utilizamos LESS y le asignamos un tamaño de fuente a la etiqueta blockquote dependiendo del tamaño fuente base.
No te preocupes, mira cómo queda el código LESS:
// Variables para el ejemplo // ------------------------- @baseFontSize: 16px; @baseFontFamily: Helvetica, sans-serif; @quoteFontFamily: Georgia, serif; // Damos estilos al párrafo y blockquote con LESS // ---------------------------------------------- p { font-family: @baseFontFamily; font-size: @baseFontSize; } blockquote { font-family: @quoteFontFamily; font-size: @baseFontSize + 4; } |
Fíjate en el tamaño de fuente (font-size) del blockquote.
No hemos creado una nueva variable para asignar el tamaño a dicha etiqueta, simplemente hemos añadido 4 al tamaño de fuente base.
Espera, ¿4 qué? ¿Qué significa todo esto? *Entrando en pánico*.
Tranquilo, te lo explico bien. LESS puede identificar qué unidad ha sido asignada y después sumarle un número a dicha unidad. En este ejemplo, LESS debería añadir 4px (pixeles) al tamaño fuente de la etiqueta blockquote.
Vamos a ver el ejemplo anterior compilado:
p { font-family: Helvetica, sans-serif; font-size: 16px; } blockquote { font-family: Georgia, serif; font-size: 20px; } |
¡Bien!, ¡funciona!.
Pero esto no termina aquí, podemos utilizar unas matemáticas un poco más compleja para hacer otro tipo de operaciones:
@specialWidth: @baseWidth * 2; @megaFont: (@baseFontSize * 14) - 10; |
¿Te gusta? Creo que esto es bastante sencillo… ¿O no?
Operando con el color
Las operaciones que os acabo de enseñar pueden ser utilizadas con el color, pero… ¿Con qué propósito?
Los colores pueden ser creados y manipulados, ya que se tratan de números hexadecimales, si quieres aprender un poco más sobre cómo funcionan te recomiendo leer el la referencia del W3CSchools.
Todavía no te he dicho el propósito de todo esto, lo sé. Tiempo al tiempo.
Un ejemplo sencillo en LESS:
// LESS // ---- @color: #888 - #222; h2 { color: @color; } |
Y su compilación:
h2 { color: #666666; } |
Ya te dije que era sencillo. :-D
Esto no es todo el potencial que guarda LESS para la manipulación de colores… ¿Quieres ver más? Alucina:
lighten(@color, 10%); // Devuelve un color 10% más claro que @color darken(@color, 10%); // Devuelve un color 10% más oscuro que @color saturate(@color, 10%); // Devuelve un color 10% más saturado que @color desaturate(@color, 10%); // Devuelve un color 10% menos saturado que @color fadein(@color, 10%); // Devuelve un color 10% menos transparente que @color fadeout(@color, 10%); // Devuelve un color 10% más transparente que @color fade(@color, 50%); // Devuelve un color con 50% de transparencia spin(@color, 10); // Devuelve un color con 10 grados más en el tono de @color spin(@color, -10); // Devuelve un color con 10 grados menos en el tono de @color mix(@color1, @color2); // Devuelve una mezcla entre los colores @color1 y @color2 |
Ahora te habrás dado cuenta del propósito de todo esto, ¿verdad? Muy potente y útil a la hora de, por ejemplo, crear gamas de color para nuestros proyectos web.
Funciones matemáticas
Por último, pero no lo menos importante… LESS permite utilizar funciones matemáticas para realizar cálculos (básicos). Entre ellas destacan: round(), ceil(), floor() y percentage(). Si introducimos un número entre sus paréntesis nos creará un número redondeado, un número redondeado hacia arriba, un número redondeado hacia abajo y un número convertido a porcentaje, respectivamente.
Como siempre, puedes buscar más sobre funciones y hacerlas tan complejas como tú quieras, yo sólo te explico las bases de su funcionamiento…
Si te gusta la entrada compártela en las redes sociales (a la derecha tienes los botones) o envíaselo a tus amigos.
También viene bien un comentario, que son dos minutos.
