[SCSS] 색상 투명도를 조절하는 컬러 함수 transparentize()

문제

// SCSS
$box-color: red;
.box {
    background-color: $box-color;
}

클래스 이름이 box인 div 요소가 100개 있다고 하자. 100개의 박스 색상을 한 번에 컨트롤하기 위해서 나는 box-color라는 변수를 만들어서 100개의 박스의 background-color에 해당 변수의 값을 넣어 주었다. 따라서, 색상을 바꾸고 싶을 때는 box-color라는 변수에 값만 딱 바꿔주면서 간단히 수정할 수 있었다.

그런데 만약에 50개는 0.3의 투명도를 가지게 하고, 나머지 50개는 0.7의 투명도를 갖게 하라는 요청이 들어온다면 우리는 이 box-color라는 하나의 변수를 가지고 어떻게 대응할 수 있을까?

 

방법

// SCSS
$box-color: red;
.box-3 {
    background-color: transparentize($box-color, 0.3);
}
.box-7 {
    background-color: transparentize($box-color, 0.7);
}

색상의 투명도를 조절해주는 컬러 함수 transparentize()를 사용하면 쉽게 해결할 수 있다.

transparentize()는 첫 번째 인자에 색상값을 두 번째 인자에 투명도(0부터 1사이)를 넣어주면 되는데, 참고로 투명도 값은 1과 가까울수록 투명해진다. 이렇게 하면 색상 변수는 1개이지만, 투명도는 각각 조절이 가능해지기 때문에 굳이 여러 개의 변수를 선언할 필요가 없게된다.

 

// SCSS
$box-color: rgba(255, 125, 110, 0.8);
.box-3 {
    background-color: transparentize($box-color, 0.3);
}
.box-7 {
    background-color: transparentize($box-color, 0.7);
}

// CSS
.box-3 {
    background-color: rgba(255, 125, 110, 0.5);
}
.box-7 {
    background-color: rgba(255, 125, 110, 0.1);
}

참고로 transparentize()는 투명도 계산도 가능하다. 변수 자체에 0.8이라는 투명도를 주고, transparentize()로 0.3이라는 투명도를 줬을 때 결과적으로 0.5라는 투명도로 컴파일되는 것을 볼 수 있다. 기존 색상값에 투명도가 있다면 transparentize()는 자동적으로 기존 투명도에서 인자로 주어진 투명도 값을 뺀 결과값을 반환하게 된다. 만약, 결과값이 마이너스일 경우 0을 출력하게 되어 아무런 효과를 주지 않는다.

 

색상의 투명도를 계산해주는 함수는 transparentize() 외에 opacify()도 있었다. 하지만, opacify()는 그렇게 권장하는 함수는 아니었기에 현재 최신 버전의 SCSS에서는 동작하지 않는다.

 

1. transparentize(색상값, 투명도);
2. transparentize()의 투명도 = 색상값(rgba)의 투명도 - 인자로 받은 투명도 (음수일 경우 적용X)