Less 컴파일러를 사용하여 16 진수 색상을 rgba로 어떻게 변환합니까?

Less 컴파일러를 사용하여 16 진수 색상을 rgba로 어떻게 변환합니까?

---

다음 코드가 있습니다.

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

나는 변환 할 필요 @color에 rgba(209, 72, 54, 1).

따라서 rgba(209, 72, 54, 1)코드 rgba()에서 @color변수 에서 값 을 생성하는 Less 함수 로 대체해야 합니다.

Less로 어떻게 할 수 있습니까?

---

실제로 Less 언어에는라는 내장 함수가 포함되어 있습니다 fade. 색상 객체와 절대 불투명도 %를 전달합니다 (값이 높을수록 투명성이 떨어짐).

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

---

알파 키가 필요하지 않은 경우 간단히 16 진수 색상 표현을 사용할 수 있습니다. 알파가 '1'인 rgba 색상은 16 진수 값과 같습니다.

이를 보여주는 몇 가지 예는 다음과 같습니다.

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

이 코드를 온라인으로 테스트하십시오 : http://lesstester.com/

---

내 덜 믹스 인 :

.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
    }
}

시도 해봐.

EDITED: As seen on rgba background with IE filter alternative: IE9 renders both!, I added some lines to the mixin.

---

It seems that with the recent Less update 3.81, you can use just two arguments in the rgba() function.

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

It works for me, but I can't find it in the official documentation.

참고URL : https://stackoverflow.com/questions/14860874/how-do-i-convert-a-hexadecimal-color-to-rgba-with-the-less-compiler