19 votos

Cómo convertir de HEXADECIMAL de color rgba con menos compilador?

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

Así que tengo que reemplazar rgba(209, 72, 54, 1) en mi código con menos del compilador que la función que genera rgba(209, 72, 54, 1) de mi @de color variable.

Cómo escribir eso ? (debe ser el uso de lessc compilador en lugar de less.js)

46voto

Soc Puntos 1147

Si usted no tiene una tecla alpha puede usar simplemente la representación hexadecimal del color. Un color rgba con un alfa de '1' es el mismo que el valor hexadecimal. Aquí están 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;
}

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

40voto

Ronald Pauffert Puntos 707

En realidad, el lenguaje viene con una función integrada llamado fade. Usted puede usarlo de esta manera:

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

8voto

helpse Puntos 445

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
    }
}

Intente.

EDITADO: Como se ve en rgba de fondo con IE filtro alternativa: IE9 hace tanto! He añadido algunas líneas para el mixin.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X