Hemos cubierto bastante sobre LESS, a partir de la creación de una navegación impecable para consejos sobre cómo trabajar más eficazmente con MENOS , pero no hemos cubrir todos ellos por el momento. En este post, vamos a mirar en las funciones menos color.
El color es una de las claves para hacer un sitio web un aspecto asombroso, sólo echar un vistazo a nuestro escaparate de tres colores hermosos sitios web . Con menos, estamos en condiciones de definir y aplicar colores más consistente con las variables, por otra parte, también somos capaces de aplicar funciones de color para adaptar y transformar los colores sin tener que hurgar en un selector de color .
Lectura recomendada: MENOS CSS - Guía para principiantes
Las Funciones
MENOS proporciona varias funciones con palabras clave muy descriptivas que podemos utilizar para manipular colores:lighten() , darken() , saturate() , desaturate() , fadein() , fadeout() , fade() spin() y mix() . Vamos a probar algunas de estas funciones para ver cómo funcionan. Para el propósito de este post, estamos recogiendo verde (
#7bab2e ) como variable para esta demostración; @ Color: # 7bab2e;
Oscurecimiento y Aligerar
La alteración de los colores con Color Función LESS es realmente strightforward. En este ejemplo a continuación, se oscurece el@color en un 20% de su valor inicial; . Box.darken {
background-color: @ color;
frontera: 3px oscurecer sólido (color @, 20%);
}
Este código resulta en la salida siguiente. La frontera, en comparación con el color dentro de la caja verde, es más oscuro. 
Lo mismo se aplica a la forma en que aligerar el
@color ; . Box.lighten {
frontera: 3px sólido aligerar (color @, 20%);
}
Tenga en cuenta que la frontera es ahora más claro que el fondo. 
Alternativamente, también puede almacenar estas funciones dentro de las variables y luego asignarlos a través de la hoja de estilo más adelante, como así;
@ ColorDark: oscurecer (color @, 20%);
. Box.darken {
background-color: @ color;
frontera: 3px Sólido @ colorDark;
}
Colores Spinning
Vamos a probar otra función, y esta vez vamos a tratar de hacer girar el@color . El spin() en función LESS se utiliza para ajustar el tono del color. Si usted ha jugado con la función de Tono / Saturación en Photoshop, esta función trabaja muy similar a él. Vamos a echar un vistazo al código siguiente.
. Box.hue {
background-color: spin (color @, 123);
}
El valor máximo de Hue hilado es 180 , pero los valores negativos como -123 está permitido. 
En menos, no somos también limitado a aplicar sólo la función, pero estamos en condiciones de definir dos funciones a la vez. Aquí está un ejemplo:
. Box.desaturate {
background-color: desaturar (spin (color @, 123), 50%);
}
En este código, primero gire el @color por 123 y luego desaturar la producción en 50% . Aquí están los resultados. 
Mezcla de colores
Por último, vamos a tratar de mezclar los colores conmix() . Esta función es la salida de un color generado a partir de la mezcla de dos colores. Si te acuerdas de cómo el verde viene a ser (una pista: es una combinación de azul y amarillo) vamos a tratar de que en menos; . Box.mix {
background-color: mix (@ azul, amarillo @, 50%);
}
Esta función necesita tres parámetros en realidad, los dos primeros son la combinación de colores y el último parámetro es el weight de cada uno de los colores, lo hemos definido para 50% . Este último parámetro, sin embargo, es un poco extraño. Por ejemplo, el
0% se traducirá en el primer color dijimos (que en este caso @blue ), mientras que 100% hará lo contrario. El resultado final es un poco extraño, así, es verde, pero no el verde que he esperado. 
Pensamiento Final
Funciones de color son sin duda muy útil. Básicamente necesitamos solamente un color y lo podemos alterar con una o un par de estas funciones para crear una combinación de colores totalmente aplicable para el sitio. A continuación hemos recopilado algunas referencias adicionales como complemento de nuestra discusión sobre los colores.- Una introducción a la teoría del color para los diseñadores del Web - Webdesigntuts +
- RGBA y color HSLA CSS - Trent Walton
- HTML Colors - W3Schools
Puestos relacionados con:
No hay comentarios:
Publicar un comentario