¿Cómo convierto un color hexadecimal a rgba con el compilador Less?

131

Tengo el siguiente código:

@color : #d14836;

.stripes span {
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
        to(transparent));

Necesito convertirme @colora rgba(209, 72, 54, 1).

Entonces, necesito reemplazar rgba(209, 72, 54, 1)mi código con una función Less que genera un rgba()valor a partir de mi @colorvariable.

¿Cómo puedo hacer esto con Less?

css less gordito
fuente
3
¿Las funciones fadein / fadeout / fade no hacen lo que necesita? lesscss.org/#reference
cimmanon

Respuestas:

348

En realidad, el lenguaje Less viene con una función incorporada llamada fade. Pasa un objeto de color y el% de opacidad absoluta (un valor más alto significa menos transparente):

fade(@color, 50%);   // Return @color with 50% opacity in rgba
Ronald Pauffert
fuente
42
@Soc respondió a la pregunta del OP, ¡pero nos dio la respuesta TODOS LOS MÁS vinieron a buscar! ¡Gracias!
BillyNair
1
¿Creo que el parámetro de cantidad no es el nivel de transparencia sino que, por el contrario, designa el nivel de opacidad?
mousio
2
@mousio En realidad, al elegir exactamente 50%, es correctamente tanto la transparencia como la opacidad. :)
Dem Pilafian
1
@mousio Si desea ser realmente técnico, creo que es más preciso la proporción del color "translúcido" que se mezcla con el color de cada píxel que superpone el elemento; consulte en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) Pero en términos prácticos, por supuesto que tienes razón; ¡El porcentaje o valor decimal representa el nivel de opacidad, no el nivel de transparencia!
Brian Lacy
55
Para el registro esto es una falla en la API. Tengo que buscarlo cada vez que quiero usarlo. Sería prudente de su parte agilizar el RGBA existente en una MENOS llamada como lo hace SASS: rgba (@colorValue, .5) de modo que produzca el mismo hing exacto que una declaración rgba CSS real. Pero bueno, ese soy yo siendo llorón. :)
dudewad
105

Si no necesita una clave alfa, simplemente puede usar la representación hexadecimal del color. Un color rgba con un alfa de '1' es el mismo que el valor hexadecimal.

Aquí hay algunos ejemplos para demostrar eso:

@baseColor: #d14836;

html {
    color: @baseColor;
    /* color:#d14836; */
}

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    /* color:#d14836; */
}

div {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
    /* rgba(209, 72, 54, 0.5); */
}

span {
    color: fade(@baseColor, 50%);
    /* rgba(209, 72, 54, 0.5); */
}

h3 {
    color: fade(@baseColor, 100%)
    /* color:#d14836; */
}

Pruebe este código en línea: http://lesstester.com/

Sebastian Stiehl
fuente
¿Qué tal este error que recibí? error evaluating function 'red': Cannot read property '0' of undefined
Aldi Unanto
Esto no se ha actualizado durante un tiempo, pero con Less PHP @colorGold: color('#C6AF87'); .box { background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); } obtengo el siguiente error: el error es: no se pudo compilar el archivo CSS (screen.less): color esperado para rojo (): falló en `background-color: rgba ( rojo (@colorGold), verde (@colorGold), azul (@colorGold), 0.3);
Chris
1
@ Chris puede asignar el color directamente para que esto funcione con Less PHP, parece que también funciona con la versión menos actual, así que adapté el ejemplo. @colorGold: #C6AF87;
Sebastian Stiehl
@ SoC esta fue mi solución eventual y la encontré poco después de que no sé qué me dio la impresión de que necesitaba envolverlo en etiquetas de color.
Chris
Echa un vistazo a mi función menos, stackoverflow.com/questions/14860874/…
helpse
12

Mi menos mixin:

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);

    background-color: @rgba-color;

    // Hack for IE8:
    background: none\9; // Only Internet Explorer 8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
    // Problem: Filter gets applied twice in Internet Explorer 9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

Intentalo.

EDITADO: Como se ve en el fondo rgba con la alternativa de filtro IE: ¡IE9 representa ambos! , Agregué algunas líneas al mixin.

ayuda
fuente
2

Parece que con la reciente actualización Less 3.81 , puede usar solo dos argumentos en la función rgba ().

rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)

A mí me funciona, pero no puedo encontrarlo en la documentación oficial .

Dmitry Davydov
fuente