Programando o Intentándolo

3 Ago 2017

Tutorial Less: 9. Mixins condicionales

Logo less

En Less las estructuras condicionales se consiguen mediante los CSS guards y Mixin guards, lo que viene a ser css/mixins protegidos que parece una cosa extraña pero no son más que mixins o estilos condicionales, de ahí lo de protegidos, porque solo se usan cuando se cumplan las condiciones y sino es como que no existiesen.

Aplicar condicionales a cualquier selector CSS en Less

Aunque el nombre del articulo sea Mixins condicionales es más por mantener un guion que por otra cosa porque en realidad el uso de los condicionales no está limitado a los mixins por lo que se pueden usar de igual modo con cualquier selector CSS e incluso con el operador & que puede ser útil para agrupar varios selectores con una condición o simplemente para hacer solo condicionales algunas de las propiedades de una clase por ejemplo.

...
2 Ago 2017

Tutorial Less: 8. Mixins con parámetros o mixins paramétricos

Logo less

En el anterior post vimos los mixins sin parámetros que nos permiten reutilizar fragmentos de código, pues con los mixins paramétricos podemos ir un paso más allá y podemos definir conjuntos de reglas reutilizables en las cuales podemos tener partes que pueden variar en función de los valores de los parámetros.

La forma de escribir los mixins no cambia, lo única diferencia son precisamente los parámetros que no son otro cosa que variables, con lo que vamos con el primer ejemplo de un mixin con un parámetro.

[crayon-59b881cf1a216857331459/]

En la definición del mixin hay una variable cuyo valor podemos utilizar en su interior y que nos permite utilizar las propiedades del mixin pero con la ventaja de poder hacer que los propiedades tomen valores personalizados y así nos ahorramos tener que hacer nuevos mixins o nuevas clases con las mismas propiedades ...

1 Ago 2017

Tutorial Less: 7. Mixins en Less

Logo less

Los mixins son sin lugar a dudas junto a las variables y las funciones una de las características principales de Less, incluso podríamos decir que es el pilar fundamental sobre el que se sustenta porque es con los mixins donde se saca el verdadero potencial de las variables y las funciones.

¿Que es un mixin?

Un mixin es una clase cuya finalidad es ofrecer una funcionalidad que pueda ser reutilizada en otras clases pero que no está pensada para usarse de forma autónoma.

Una definición muy bonita pero quizás no suficientemente clara, he puesto a propósito reutilizada y no heredada porque con un mixin se busca coger una funcionalidad y ponerla donde creamos oportuno pero sin tener que convertir el selector en el que se use en una especialización de la clase padre que es lo que hace el concepto de ...

31 Jul 2017

Tutorial Less: 6. @Import en Less

Logo less

En CSS los imports casi tienen más inconvenientes que ventajas, pero con las nuevas posibilidades que nos da Less pasan a ser muy útiles para separar los estilos en diferentes archivos y conseguir una mejor organización, facilitar la reutilización al poder incluir solo los estilos necesarios para cada caso sin tener que duplicarlos o cargar listas interminables de estilos.

¿Cómo funciona los @import en Less?

El @import tiene 2 funcionamientos diferentes dependiendo del tipo de extensión del archivo que se importe.

Extensión .css: En este caso Less no hace nada (si el @import no está en el inicio del archivo lo mueve al inicio para sea correcto en CSS) y el @import se pasa directamente al CSS generado sin hacer ningún tipo de tratamiento. Extensión .less: Si lo que se importa es un archivo con extensión .less, sin extensión o con ...
30 Jul 2017

Tutorial Less: 5. Herencia en Less (Extend)

Logo less

Con Less se introduce el concepto de herencia, otro de los puntos que se echaba de menos en CSS y que nos va a ayudar a estructurar mejor nuestros estilos además de permitirnos eliminar el uso de clases base en nuestro HTML.

¿Cómo se utiliza la herencia en Less?

Para hacer que un selector en Less herede las propiedades de otro hay que utilizar la pseudo-clase :extend() que se puede usar de 2 modos. Como hacemos habitualmente con las pseudo-clases o bien usando el operador & como vimos en el primer artículo del tutorial, el resultado es el mismo de ambas formas así que usar una u otra forma es cuestión de gustos, personalmente me quedo con la primera.

Es importante que extend siempre sea la última pseudo-clase porque si no se producirá un fallo en la compilación.

[crayon-59b881cf1aed3035920714/]

Y el ...