ProgramandooIntentándolo

20 Oct 2017

Tutorial Less: 13. Funciones para trabajar con colores en Less

TypeScript reference

Less nos ofrece un buen conjunto de funciones de diferentes tipos que le añaden un plus a la hora de simplificar la forma en la que podemos generar nuestras hojas de estilos y además nos permiten hacer cosas bastante interesantes.

Nos vamos a centrar en las funciones referentes a operaciones con colores porque son las que más juego nos pueden dar y serán de las que más utilicemos, de hecho, en varios de los artículos anteriores ya hemos utilizado varias funciones para trabajar con colores

En la web de Less tenemos un apartado de la documentación completo con todas las funciones que hay, por si quieres consultarlas.

El propósito de este post es ver de qué formas podemos usar las funciones de Less para conseguir esquemas de color fácilmente y sin tener que recurrir a herramientas externas o volvernos ...

10 Oct 2017

Tutorial Less: 12. Combinar los valores de una propiedad en Less (Merge)

Logo less

Less permite combinar los valores de una propiedad definidos en distintos lugares para que en lugar de sobrescribirse que es el comportamiento de CSS para estas situaciones, se vayan incluyendo los nuevos valores como una lista de valores separados por comas o por espacios dependiendo de la forma en la que se haga.

Esta característica solo tiene sentido para usarse con propiedades que soporten listas de valores como los fondos, los sombreados, las transformaciones, animaciones y transiciones o las familias de fuentes, pero en realidad se pueden usar con cualquier propiedad aunque no tenga mucho sentido.

Sintaxis del merge en Less

Hay 2 posibilidades para combinar las listas de propiedades, separándolas por comas o por espacios, que se haga de un modo u otro depende de la sintaxis utilizada.

Para separar por comas hay que añadir + como sufijo al nombre ...
3 Oct 2017

Tutorial Less: 11. Espacios de nombres o namespaces en Less

Logo less

Los espacios de nombres o namespaces son una forma para agrupar clases y mixins en Less y así poder organizar los estilos para facilitar su búsqueda, reutilización, … y también para evitar los conflictos por usar nombres de clases o de mixins repetidos para varias cosas o con los definidos por librerías externas.

Desde el punto de vista organizativo su uso tiene sentido cuando tenemos múltiples hojas de estilo y miles de líneas, si no con tener las clases definidas con un mínimo de cuidado y organización es suficiente. Pero aun en estos casos hay dos puntos a tener en cuenta, la reutilización y la posibilidad de conflictos con otras clases, ya sean externas o nuestras.

Los namespaces son un gran aliado para la reutilización de mixins y clases sobre todo cuando no tenemos una hoja de estilos para cada cosa, ...

26 Sep 2017

Tutorial Less: 10. Mixins recursivos (Bucles en Less)

Logo less

En Less se puede hacer la llamada a un mixin desde dentro de otro y claro si el mixin al que llamamos es el mismo desde el que se hace la llamada pues nos encontramos con que tenemos una llamada recursiva y de este modo podemos crear bucles para generar clases en las que solo cambian los valores de algunos atributos como por ejemplo los grids donde lo que cambia es el ancho de las columnas o para crear clases para botones, avisos, etc. donde lo que cambiamos son los colores por ejemplo.

Parece claro que la posibilidad de crear bucles en Less con los mixins recursivos nos puede ayudar a conseguir un código mucho más compacto y reutilizable, pero como no todo puede ser perfecto también vamos a hacerlo un poco más complejo, así que tampoco hay que querer caer ...

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.

...