2013-12-12 6 views
7

ho alcuni valori di colore HEX a Stilo simili ai seguentiConverti HEX a RGBA in Stylus

$my-background ?= #123456 
$my-foreground ?= #ABCDEF 

e vorrebbe usarli in valori RGBA per opacità, in modo che

.my-class 
    background rgba($my-background, .5) 
    foreground rgba($my-foreground, .5) 

o una sintassi alternativa viene compilato in CSS come

.my-class { 
    background rgba(18, 52, 86, .5); 
    foreground rgba(171, 205, 239, .5); 
} 

c'è un modo rapido e facile da usare valori di colore HEX in RGBA utilizzando stylu s o un plugin per Stylus (come il pennino)?

risposta

13

In realtà, il rgba in stilo funziona proprio così, hai provato quello che hai scritto? In Stylus

$my-background ?= #123456 
$my-foreground ?= #ABCDEF 

.my-class 
    background rgba($my-background, .5) 
    foreground rgba($my-foreground, .5) 

sarebbe in realtà la compilazione di

.my-class { 
    background: rgba(18,52,86,0.5); 
    foreground: rgba(171,205,239,0.5); 
} 

Questo significa che si può solo andare a fare le cose come rgba(black, 0.5), rgba(#FFF, 0.5) e utilizzare le variabili all'interno di esso, proprio come nel tuo caso.

+2

* face palm * grazie – Metalshark

+0

@Metalshark Ho dato la tua domanda un +1 perché anche io non l'ho provato prima di cercare su internet. –

1

Alla fine ho fatto la mia propria funzione per fare questo:

hextorgba(color, alpha = 1) 
    'rgba(' + red(color) + ', ' + green(color) + ', ' + blue(color) + ', ' + alpha + ')'