Come faccio a convertire un colore esadecimale in rgba con il compilatore Less?

131

Ho il codice seguente:

@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));

Ho bisogno di convertire @colorin rgba(209, 72, 54, 1).

Quindi devo sostituire il rgba(209, 72, 54, 1)mio codice con una funzione Less che genera un rgba()valore dalla mia @colorvariabile.

Come posso farlo con meno?

css less

— chubbyk
fonte

3

Le funzioni fadein / fadeout / fade non fanno ciò di cui hai bisogno? lesscss.org/#reference

— cimmanon,

348

In realtà, il linguaggio Less è dotato di una funzione integrata chiamata fade. Si passa un oggetto colore e l'opacità assoluta% (un valore più alto significa meno trasparente):

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

— Ronald Pauffert
fonte

42

@Soc ha risposto alla domanda del PO, ma tu ci hai dato la risposta TUTTI GLI ALTRI sono venuti qui per trovare! Grazie!

— BillyNair,

1

Penso che il parametro quantità non sia il livello di trasparenza ma al contrario designa il livello di opacità?

— mousio

2

@mousio In realtà, scegliendo esattamente 50%, è correttamente sia trasparenza che opacità. :)

— Dem Pilafian,

1

@mousio Se vuoi diventare veramente tecnico, credo che sia più precisamente la proporzione del colore "traslucido" a fondersi con il colore di ciascun pixel su cui si sovrappone l'elemento - vedi en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) Ma in termini pratici, ovviamente hai ragione; il valore percentuale o decimale rappresenta il livello di opacità, non il livello di trasparenza!

— Brian Lacy,

5

Per la cronaca questo è un difetto nell'API. Devo cercarlo ogni volta che voglio usarlo. Sarebbe saggio da parte loro appianare l'RGBA esistente in una MENO chiamata come fa SASS - rgba (@colorValue, .5) in modo tale da produrre lo stesso hing esatto di una vera dichiarazione CSS rgba. Ma hey, sono io a essere lamentoso. :)

— Dudewad il

105

Se non hai bisogno di una chiave alfa, puoi semplicemente usare la rappresentazione esadecimale del colore. Un colore rgba con un alfa di '1' è uguale al valore esadecimale.

Ecco alcuni esempi per dimostrare che:

@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; */
}

Prova questo codice online: http://lesstester.com/

— Sebastian Stiehl
fonte

Che ne dici di questo errore che ho ricevuto? error evaluating function 'red': Cannot read property '0' of undefined

— Aldi Unanto,

Questo non è stato aggiornato per un po 'ma con Meno PHP sto ottenendo il seguente errore - L'

@colorGold: color('#C6AF87');  .box {         background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); }

errore è - Impossibile compilare il file CSS (screen.less): colore previsto per rosso (): errore in `background-color: rgba ( rosso (@colorGold), verde (@colorGold), blu (@colorGold), 0.3);

— Chris,

1

@Chris puoi assegnare direttamente il colore per farlo funzionare con Less PHP, sembra funzionare anche con l'attuale versione in meno, quindi ho adattato l'esempio. @colorGold: #C6AF87;

— Sebastian Stiehl,

@Soc questa è stata la mia eventuale soluzione e l'ho trovata poco dopo non so cosa mi ha dato l'impressione di cui avevo bisogno per avvolgerla in etichette colorate!

— Chris,

Scopri la mia funzione di meno, 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
    }
}

Provalo.

EDITED: visto su sfondo rgba con alternativa al filtro IE: IE9 rende entrambi! , Ho aggiunto alcune righe al mixin.

— helpse
fonte

2

Sembra che con il recente aggiornamento 3.81 , puoi usare solo due argomenti nella funzione rgba ().

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

Funziona per me, ma non lo trovo nella documentazione ufficiale .

— Dmitry Davydov
fonte