scss 투명도 opacity 설정하기

css의 전처리기 중 하나인 scss를 사용하여 색의 투명도를 설정하는 방법을 알아봅니다.


scss는 다양한 방법으로 투명도, Alpha를 설정할 수 있습니다. 이가운데 rgba()를 사용하면 간단하게 투명도를 설정할 수 있습니다.

rgba(색상, 투명도)


투명도는 0~1의 값을 사용할 수 있습니다. 이 방법은 매우 유용합니다. 일반적으로 

! scss 색에 투명도 opacity, alpha값 적용 예제

아래는 간단한 예제입니다. 만약 변수 $red100에 투명도(alpha) 50%를 설정하여 새로운 변수 $red50을 선언하려면 아래와 같이 코드를 입력합니다.

이와 같은 방식으로 원하는 색상의 투명도를 조절하여 같은 색상의 다른 투명도를 여러개 설정 할 수 있습니다.

동일한 톤앤매너를 유지하면서 컴포넌트의 스타일을 선언하기 위해 이와 같은 방식은 많이 사용됩니다. 다른 색상들 역시 비슷하게 연속하여 선언할 수 있습니다.

@ /variable/color.scss

여기까지 scss에서 특정 색의 투명도를 조절하여 사용하는 방법을 알아보았습니다.