Como converter uma cor hexadecimal em rgba com o compilador Menos?

131

Eu tenho o seguinte 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));

Eu preciso converter @colorpara rgba(209, 72, 54, 1).

Portanto, preciso substituir rgba(209, 72, 54, 1)no meu código uma função Less que gere um rgba()valor da minha @colorvariável.

Como posso fazer isso com menos?

css less gordinho
fonte
3
As funções fadein / fadeout / fade não fazem o que você precisa? lesscss.org/#reference
cimmanon

Respostas:

348

Na verdade, a linguagem Less vem com uma função incorporada chamada fade. Você passa um objeto colorido e a% absoluta de opacidade (valor mais alto significa menos transparente):

fade(@color, 50%);   // Return @color with 50% opacity in rgba
Ronald Pauffert
fonte
42
O @Soc respondeu à pergunta do OP, mas você nos deu a resposta TODOS OS OUTROS vieram aqui para encontrar! Obrigado!
precisa saber é o seguinte
1
Eu acho que o parâmetro de quantidade não é o nível de transparência, mas, ao contrário, designa o nível de opacidade?
mousio 4/03/15
2
@mousio Na verdade, escolhendo exatamente 50%, é corretamente transparência e opacidade. :)
Dem Pilafian
1
@mousio Se você quer ser realmente técnico, acredito que é mais precisamente a proporção da cor "translúcida" a se misturar com a cor de cada pixel sobreposto pelo elemento - consulte en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) Mas em termos práticos, é claro que você está certo; o valor percentual ou decimal representa o nível de opacidade, não o nível de transparência!
Brian Lacy
5
Para o registro, isso é uma falha na API. Eu tenho que procurar toda vez que quiser usá-lo. Seria sensato que eles adicionassem o RGBA existente a uma chamada MENOS, como o SASS faz - rgba (@colorValue, .5), de modo que produza o mesmo hing exato que uma declaração rgba CSS real. Mas ei, esse sou eu choramingando. :)
dudewad
105

Se você não precisar de uma chave alfa, pode simplesmente usar a representação hexadecimal da cor. Uma cor rgba com um alfa de '1' é igual ao valor hexadecimal.

Aqui estão alguns exemplos para demonstrar 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; */
}

Teste este código online: http://lesstester.com/

Sebastian Stiehl
fonte
Que tal esse erro que recebi? error evaluating function 'red': Cannot read property '0' of undefined
Aldi Unanto
Isso não foi atualizado por um tempo, mas com Menos PHP, estou recebendo o seguinte erro - O @colorGold: color('#C6AF87'); .box { background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); } erro é - Não foi possível compilar o arquivo CSS (screen.less): cor esperada para red (): falha em `background-color: rgba ( vermelho (@colorGold), verde (@colorGold), azul (@colorGold), 0,3);
31413 Chris
1
@ Chris, você pode atribuir a cor diretamente para fazer isso funcionar com menos PHP, também parece funcionar com a versão atual menos, então adaptei o exemplo. @colorGold: #C6AF87;
Sebastian Stiehl
@Soc, essa foi minha solução final e eu a encontrei logo depois, não sei o que me deu a impressão de que precisava envolvê-la em etiquetas coloridas!
Chris
Verifique minha função menos, stackoverflow.com/questions/14860874/…
helpse
12

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

Tente.

EDITADO: Como visto no plano de fundo rgba com a alternativa de filtro do IE: o IE9 renderiza os dois! , Adicionei algumas linhas ao mixin.

ajudar
fonte
2

Parece que com a recente atualização Less 3.81 , você pode usar apenas dois argumentos na função rgba ().

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

Funciona para mim, mas não consigo encontrá-lo na documentação oficial .

Dmitry Davydov
fonte