css - hexadecimal - rgba to hex with opacity

Cómo convertir color hexadecimal a rgba con menos compilador?

Question

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 convertir @color a rgba(209, 72, 54, 1) .

Entonces necesito reemplazar rgba(209, 72, 54, 1) en mi código con la función Less que genera el valor rgba() de mi variable @color .

¿Cómo puedo hacer esto con Less?

Answer 1

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

fade(@color, 50%);   // return @color with 50% opacity in rgba

Answer 2

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 IE8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr=''%d'', endColorstr=''%d'')", argb(@rgba-color),argb(@rgba-color))); // IE9 and down
    // Problem: Filter gets applied twice in IE9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled=''false''); // Only IE9
    }
}

Intentalo.

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

Answer 3

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 que:

@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/