Manipular colores con LESS CSS

4677 Insertado en Personalización avanzada

Las variables de color son las pre-definidas en la sección diseño y cuatro (primario, claro, oscuro y blanco) las opciones:

@color-primary
@color-light
@color-dark
@color-white

Por ejemplo, si necesitamos cambiar el color del fondo de un encabezado h1 sería:

h1{background-color:@color-white}


También podremos usar “funciones de color” que nos permitirán realizar alteraciones sobre un color:

lighten para aclarar un color
darken para oscurecerlo
saturate para saturarlo, o “aumentar el color”
desaturate para desaturarlo, o “reducir el color”
fadein para resaltarlo quitandole transparencia
fadeout para disimularlo usando transparencia
fade para cambiar la transparencia a 50%
spin para cambiar el tono de color
mix para mezclar dos colores

La sintaxis quedaría tal que así:

color:lighten(@color-primary, 60%);

 

¿Te ha sido útil?

¿No encuentras lo que andas buscando?

Te ayudaremos o te pondremos en contacto con un experto

Contáctanos