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

131

다음 코드가 있습니다.

@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로 어떻게 할 수 있습니까?

css less

— 통통
소스

3

fadein / fadeout / fade 기능이 필요한 기능을 수행하지 않습니까? lesscss.org/#reference

— cimmanon

348

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

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

— 로널드 퍼 퍼트
소스

42

@Soc은 OP의 질문에 대답했지만 모두 다른 사람이 여기에 찾아온 답을 알려주었습니다. 감사합니다!

— BillyNair

1

양 매개 변수가 투명도 수준이 아니라 불투명도 수준을 지정한다고 생각합니까?

— mousio

2

@mousio 실제로 정확하게를 선택 50%하면 투명도와 불투명도가 모두 올바르게됩니다. :)

— Dem Pilafian

1

@mousio 만약 당신이 정말로 기술적이기를 원한다면, "반투명"색상의 비율이 요소가 오버레이하는 각 픽셀의 색상과 혼합되는 것이 더 정확하다고 생각합니다 . en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) 그러나 실제적인면에서, 당신은 옳습니다. 백분율 또는 10 진수 값은 투명도 수준이 아니라 불투명도 수준을 나타냅니다!

— Brian Lacy

5

기록적으로 이것은 API의 결함입니다. 사용할 때마다 찾아야합니다. SASS처럼 rgba (@colorValue, .5)처럼 기존 RGBA를 LESS 호출로 구성하여 실제 CSS rgba 선언과 동일한 정확한 힌지를 출력하는 것이 현명합니다. 그러나 저기, 저 위니입니다. :)

— dudewad

105

알파 키가 필요하지 않은 경우 간단히 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/

— 세바스찬 스티 엘
소스

이 오류는 어떻습니까? error evaluating function 'red': Cannot read property '0' of undefined

— Aldi Unanto

이것은 잠시 동안 업데이트되지 않았지만 PHP가 적 으면 다음과 같은 오류가 발생합니다.-

@colorGold: color('#C6AF87');  .box {         background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); }

오류는-CSS 파일 (screen.less)을 컴파일 할 수 없습니다. 적색 (@colorGold), 녹색 (@colorGold), 청색 (@colorGold), 0.3);

— Chris

1

@Chris 당신은 Less PHP 로이 작업을하기 위해 직접 색상을 할당 할 수 있습니다. 현재 적은 버전에서도 작동하므로 예제를 수정했습니다. @colorGold: #C6AF87;

— Sebastian Stiehl

@ Soc 이것은 궁극적 인 솔루션 였고 색상 태그로 감싸는 데 필요한 인상을 얻은 것이 무엇인지 알지 못했을 때 곧 발견했습니다!

— Chris

내 기능이 적은 stackoverflow.com/questions/14860874/…를

— 01 초에 도움

12

내 덜 믹스 인 :

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

시도 해봐.

편집 : IE 필터를 사용 하여 rgba 배경에서 볼 수 있듯이 IE9는 둘 다 렌더링합니다! 믹스 인에 몇 줄을 추가했습니다.

— 도움
소스

2

최근 Less update 3.81 에서는 rgba () 함수에서 두 개의 인수 만 사용할 수 있습니다.

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

그것은 나를 위해 작동하지만 공식 문서 에서 찾을 수 없습니다 .

— 드미트리 다비도프
소스