SCSS 활용 팁 14. SCSS 컬러 내장함수 사용하여 색상 관리하기

컴포넌트의 상태에 따라 색상을 변경하고 싶을 때, 각 컴포넌트의 기본색에서 밝은색과 어두운색을 하나하나 스포이드로 뽑아 rgb값을 직접 입력하여 작업했던 경험이 있습니다. 이런 작업은 번거로울 뿐만 아니라 일관적으로 색상을 표현하는데 어려움을 줍니다. 이럴 때 SCSS의 내장함수를 사용하면 자동으로 색상을 계산하여 조정할 수 있어 효율적이고, 여러 색상의 변형을 일정한 값으로 줄 수 있어 일관적으로 스타일을 유지할 수 있습니다. 이번 글에서는 SCSS의 색상 관련 내장함수를 몇가지 살펴보려 합니다.

SCSS 컬러 내장함수

밝기 조절

• lighten($color, $amount) : $color를 $amount%만큼 밝게 합니다.
• darken($color, $amount) : $color를 $amount%만큼 어둡게 합니다.

채도 조절

• grayscale($color) : $color의 채도를 빼서 그레이스케일로 변환합니다.
• saturate($color, $amount) : $color의 채도를 $amount%만큼 증가시킵니다.
• desaturate($color, $amount) : $color의 채도를 $amount%만큼 감소시킵니다.

투명도 조절

• transparentize($color, $amount) : $color를 $amount%만큼 투명하게 합니다. (1은 완전 투명)
• opacity($color, $amount) : $color의 불투명도를 $amount%만큼 증가시킵니다. (1은 완전 불투명)

색상 혼합

• mix($color1, $color2, $weight) : $color1과 $color2를 $weight% 비율로 섞습니다. (기본값: 50%)

👉 transparentize와 opacity의 차이
transparentize는 색상 자체의 알파값을 변경하는 함수로, 결과가 rgba값으로 변환됩니다. 따라서 색상에만 투명도를 적용하고 요소의 내부 콘텐츠에는 영향을 주지 않습니다. 반면 opacity는 oapacity 속성으로 변환되어 요소 전체의 투명도를 조정합니다. 상황에따라 두개의 함수를 적절히 조합하여 사용하면 좋습니다.

SCSS 컬러 내장함수 활용하기

SCSS의 컬러 내장함수를 활용하여 버튼 컴포넌트를 만들어 보겠습니다. 버튼 스타일을 믹스인으로 만들고, 버튼의 기본색에 따라 함수를 이용해 호버(hover)효과, 활성화(active)효과, 비활성화(disabled)효과 색상을 자동으로 지정합니다.

// 버튼 스타일 변수 설정
$primary: #2563eb;
$success: #22c55e;
$warning: #facc15;
$text-color: #ffffff;

// 버튼 스타일 믹스인
@mixin button-variant($color) {
  background-color: $color;
  color: $text-color;
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-size: 1rem;

  &:hover {
    background-color: lighten($color, 10%);
  }

  &:active {
    background-color: darken($color, 10%);
  }

  &:disabled {
    background-color: mix($color, #ffffff, 50%);
    color: mix($text-color, $color, 60%);
  }
}

// 버튼 스타일 적용
.button {
  @include button-variant($primary);
  &.success {
    @include button-variant($success);
  }
  &.warning {
    @include button-variant($warning);
  }  
}

위 코드를 CSS로 컴파일 해보겠습니다. 

.button {
  background-color: #2563eb;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
}
.button:hover {
  background-color: #4f83f0;
}
.button:active {
  background-color: #1f56cf;
}
.button:disabled {
  background-color: #8ca8f4;
  color: #d8e0f9;
}

.button.success {
  background-color: #22c55e;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
}
.button.success:hover {
  background-color: #4fe27d;
}
.button.success:active {
  background-color: #1ea64f;
}
.button.success:disabled {
  background-color: #99e8b1;
  color: #d8f4e0;
}

.button.warning {
  background-color: #facc15;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
}
.button.warning:hover {
  background-color: #fce44d;
}
.button.warning:active {
  background-color: #d0ac12;
}
.button.warning:disabled {
  background-color: #fdea8e;
  color: #fdf4d5;
}

각 버튼의 기본 배경색을 기준으로 호버시에는 색상이 더 밝아지고, 클릭(활성화)시에는 색상이 어두워지며, 버튼이 비활성화 되면 색상이 흰색과 혼합되어 연해지게 하는 코드가 쉽게 작성되었습니다. 이렇게 컬러 내장함수를 이용하여 손쉽게 스타일을 확장 할 수 있습니다.