MENO CSS preprocessore: C'è un modo per mappare un singolo colore per una definizione di RGB e RGBA?

StackOverflow https://stackoverflow.com/questions/4445238

  •  10-10-2019
  •  | 
  •  

Domanda

Sto cercando di scrivere un blocco nel CSS preprocessore MENO che farà il seguente:

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: rgba(<color R value>, <color G value>, <color B value>, @alpha);
}

C'è un modo per ottenere il RGB valori di @color se si tratta di una definizione esagonale standard (vale a dire #RRGGBB)? C'è un modo per farlo se @color è definito qualche altro modo?

EDIT: SOLUZIONE

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: @color + rgba(0, 0, 0, @alpha);
}
È stato utile?

Soluzione

Nessuna delle soluzioni funziona più, ma questo si fa (grazie a @Elyse ):

.alpha(@color, @alpha: 0.8) {
    color: @color;
    color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

La funzione hsla(), pur non essendo pubblicizzato nel sito MENO, è definito nel codice sorgente .

Altri suggerimenti

Prova questo:

background: @color - rgba(0, 0, 0, 1.0) + rgba(0, 0, 0, @alpha);

La sottrazione sarà chiaro il canale alfa su @color poi basta aggiungere il @alpha desiderata per il canale alfa. I colori hanno la suite completa di operatori e funzionano componente per componente quando si opera su due colori; i colori vengono memorizzati come componenti RGBA internamente in modo questo dovrebbe funzionare. Inoltre, il canale alfa è normalizzata essere nel [0, 1.0] intervallo così sottraendo 1,0 dal canale alfa dovrebbe cancellare senza causare alcun problema.

Non ho CSS MENO istituito in questo momento quindi non posso controllare ma questo vale la pena un colpo.

Si noti che è anche possibile procedere con l'fadein / dissolvenza funzioni MENO:

.alpha(@color, @alpha: 80)
{
    background-color: fadeout(@color, (100 - @alpha));
}

Così, alfa (rosso, 25) si tradurrà in un colore di sfondo del RGBA (255, 0, 0, 0.25)

So che questa è una vecchia questione, ma se tutto si sta cercando di fare è aggiungere un valore alpha basta usare fade(@color, @alpha). Il colore può essere in esadecimale, RGBA o HSLA.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top