css - learn - rgba color codes

¿LESScss convirtiendo rgba a hexadecimal? ¿Cómo anidar las variables de color en un mixin?

Question

¿LESScss convierte todos los colores rgba a valores hexadecimales?

Estoy tratando de crear una mezcla, digamos, .color, que te permita pasar una variable de color definida previamente, y quiero que esté en rgba

Esto no funciona, pero aquí está la idea:

.bgcolor(@colorvariable,@alpha) {
background-color: @colorvariable + rgba(0, 0, 0, @alpha);
}

Donde @colorvariable estaría, @blue: rgb(17,55,76); o @green: rgb(125,188,83); etc.

Quiero definir un montón de estas variables, y luego poder pasarlas a .bgcolor o .color mixin y cambiar la transparencia alfa sobre la marcha.

Siento que esto debería ser posible, pero me falta algo. -Ahora mismo, mi código solo genera un valor de color hexadecimal, casi sin importar lo que ingrese.- Si paso un valor @alpha de 1, genera un valor de color hexadecimal. Solo los valores de @alpha menores que 1 obligan al navegador a mostrarme un valor rgba. Así que eso está resuelto.

Ahora, ¿cómo pasar el rgb y las partes por separado de una variable predefinida?

Answer 1

LESS tiene un conjunto de funciones para fade , fade o fadeOut un color. Debes poder pasar cualquier color a estos mixins (hsl, rgb, rgba, hex, etc.)

// fade color to 40%
color: fade(#000000, 40);
// fade in color by 10%
color: fadeIn(rgba(0, 0, 0, .5), 10);
// fade out color by 10%
color: fadeOut(rgba(0, 0, 0, .5), 10);

Answer 2

Resulta que, menos tiene funciones hsla integradas (ver menos funciones de color ). Así que con un poco de ayuda, esto es lo que descubrimos:

 @dkblue: #11374c;
.colorize_bg(@color: @white, @alpha: 1) {
background: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);}

Luego usa la mezcla:

section {.colorize_bg(@dkblue,1);}

Así que pasamos la variable de color @dkblue y las funciones less ''como hue(@color) toman @dkblue y @dkblue sus valores de matiz, saturación y luminosidad. Luego podemos pasar un alfa que definimos en esa mezcla.

Entonces puedo usarlo de otras maneras, como definir bordes transparentes. Añadiendo background-clip: padding-box; to .colorize_bg Me .colorize_bg que mis bordes se .colorize_bg fuera del color de la caja de bg (¿no es mágico CSS3?) Luego puedo redefinir la mezcla para que funcione con el color de borde:

 .colorize_border(@color: @white, @alpha: 1) {border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);}

y luego da a la section el ancho del borde, el estilo y define el color a través de la mezcla:

section {border-width: 0 10px; border-style: solid; .colorize_border(@dkblue, .5);

Y obtendrás bordes transparentes mágicos y brillantes, como así: http://i.stack.imgur.com/4jSKR.png

Answer 3

Tampoco necesita convertir a hsla, por lo que no necesitará un valor blanco

.hexBackgroundToRGBA(@color,@alpha){
@myred:red(@color);
@mygreen:green(@color);
@myblue:blue(@color);
background-color: @color;
background-color: rgba(@myred,@mygreen,@myblue,@alpha);
}

Tendrá que escribir algunas de estas combinaciones en las que necesite configurar cosas distintas del conjunto de propiedades de color de fondo, pero esa es la idea. Solo llámalo así:

#selector{ .hexBackgroundToRGBA(@gray, 0.8); }

Eso tomará cualquier valor de color que tenga en la variable @gray y generará una solución de navegador cruzado con una transparencia del 80% con un color sólido de respaldo para los navegadores que no admiten rgba ().