SCSS 활용 팁 15. SCSS 컬러 내장함수 사용하여 컬러쉐이드 만들기

이전 글에서는 SCSS의 여러가지 컬러 내장함수를 알아보고 이를 이용하여 버튼의 상태에 따라 색상이 자동으로 변경되는 스타일을 만들어 봤는데요, 이번에는 그중 darken()과 lighten()을 활용하여 디자인시스템에서 사용 가능한 컬러 쉐이드를 만들어보겠습니다. 

컬러 쉐이드(Color Shade)

컬러 쉐이드는 특정 색을 기준으로 하여 단계적으로 밝게, 또는 어둡게 변형을 주는 것을 말합니다. 같은 색상 계열에서 다양한 값을 표현하고 싶을 때 사용합니다. 아래는 제가 주로 사용하는 Tailwind CSS의 컬러 쉐이드 팔레트입니다.

Map과 @each를 사용한 컬러 쉐이드 만들기

$primary-color: #2563eb;

$shades: (
  lightest: lighten($primary-color, 40%),
  lighter: lighten($primary-color, 20%),
  base: $primary-color,
  darker: darken($primary-color, 20%),
  darkest: darken($primary-color, 40%)
);

@each $name, $color in $shades {
  .btn-#{$name} {
    background-color: $color;
  }
}

SCSS의 컬러 내장함수와 함께 map기능과 @each를 사용하면 여러 단계의 컬러 쉐이드를 자동으로 생성할 수 있습니다. $primary-color의 밝기를 조절한 $shades라는 맵을 만들고 이것을 @each로 반복하여 클래스를 생성하면 .btn-lightest, .btn-lighter, .btn-base, .btn-darker, .btn-darkest의 클래스가 생성되어 쉽게 사용할 수 있습니다.

믹스인을 사용한 컬러 쉐이드 만들기

이번에는 믹스인을 활용하여 조금 더 여러 단계로, 조금 더 간편하게 쉐이드를 만들어 보겠습니다.

@mixin generate-shades($color, $name) {
  @for $i from 1 through 9 {
    @if $i <= 5 {
      background-color: lighten($color, (5 - $i) * 10%);
    } @else {
      background-color: darken($color, ($i - 5) * 10%);
    }
  }
}
$primary-color: #3498db; // 기본 색상

@include generate-shades($primary-color, "primary");

위와 같이 믹스인을 작성하여 실행하면 .primary-1 부터 .primary-9까지 10%씩 밝기가 증가하는 쉐이드를 만들 수 있습니다. 만약 클래스명을 .primary-10 ~ .primary-90까지로 바꾸고 싶다면 다음과 같이 작성하면 됩니다.

@mixin generate-shades($color, $name) {
  @for $i from 1 through 9 {
    .#{$name}-#{$i * 10} {
      @if $i <= 5 {
        background-color: lighten($color, (5 - $i) * 10%);
      } @else {
        background-color: darken($color, ($i - 5) * 10%);
      }
    }
  }
}
$primary-color: #3498db; // 기본 색상

@include generate-shades($primary-color, "primary");