Twitter bootstrap hex to rgba?

Question

Tengo una variable que se utiliza en mis hojas .less.

La variable está en formato hexadecimal #f57e20.

Quiero usar ese color pero agregarle un canal alfa.

Quiero terminar con rgba(245, 126, 32, 0.5)

¿El arranque o .less tener nada que ver esto?

Answer 1

Hay un poco de funciones integradas en less.js y mixins de Bootstrap que se puede utilizar:

Esta es una función less.js:

Estos dos resultar en:

.test { 
    background: rgba(245, 126, 32, 0.5); 
} 
.test2 { 
    background: rgba(245, 126, 32, 0.5); 
} 

O utilizar un mixin de arranque:

.test3 { 
    #translucent > .background(#f57e20, 0.5); // use HSLA mixin 
} 

que se traduce en:

.test3 { 
    background-color: rgba(244, 123, 31, 0.5); 
} 

voy a incluir el código (fijo) para los translucent mixins aquí para fines de archivo, ya que (última vez que revisé) ya no se incluye como de Bootstrap 3.0.0:

// Add an alphatransparency value to any background or border color (via Elyse Holladay) 
#translucent { 
    .background(@color: @white, @alpha: 1) { 
    background-color: fade(@color, @alpha); 
    } 
    .border(@color: @white, @alpha: 1) { 
    border-color: fade(@color, @alpha); 
    .background-clip(padding-box); 
    } 
} 

Answer 2

Es posible que desee probar:

background: rgba(red(@color), green(@color), blue(@color), @alpha); 

que tenía que hacer algo similar cuando se escribe un mixin rápido, que utiliza la caja-sh adorar