rgba에 트위터 부트 스트랩?

Question

나는 내 .less 시트에 사용되는 변수가 있습니다.

변수는 16 진수 형식 #f57e20입니다.

해당 색상을 사용하고 싶지만 알파 채널을 추가하고 싶습니다.

내가 rgba(245, 126, 32, 0.5)

와 끝까지하려는 부트 스트랩 않거나이 아무 상관이 .less?

Answer 1

가되어 당신이 사용할 수있는 부트 스트랩에서 less.js 및 유지 mixin에 기능 내장 일부 :

// using a variable 

@color: #f57e20; 

.test { 
    background: fade(@color, 50%); // return @color with 50% transparency 
} 

// or without the color variable 

.test2 { 
    background: fade(#f57e20, 50%); // return @color with 50% transparency 
} 

이 모두 결과 :

를

이것은 less.js 기능입니다

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

또는 부트 스트랩 믹스 인 사용

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

01 23,516,결과

:

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

거 야 (마지막으로 내가 확인)이 더 이상 부트 스트랩 3.0.0에 포함되어 있기 때문에, 보관을 위해 여기 translucent 유지 mixin에 대한 (고정) 코드를 포함하지 :

// 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

:

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

나는 상자 쉬를 사용 빠른 믹스 인을 작성할 때 비슷한 일을해야했다 고독한.