Sass 변수에서 CSS 색상 팔레트 만들기

프로젝트에서 정의된 색상 팔레트를 사용합니까? 디자인 시스템에서 비롯된 것일 수도 있고 많이 사용하는 임의의 색상 목록일 수도 있습니다. 작거나 큰 프로젝트, 매우 큰 프로젝트 등 많은 프로젝트에서 작업한 사람으로서 정의된 색상 세트를 사용하면 작업을 체계적으로 유지하는 데 도움이 될 수 있습니다.



가장 최근에는 모두 동일한 기본 팔레트를 사용하는 수백 개의 사이트를 호스팅하는 플랫폼에서 작업했습니다. 이 팔레트는 멋진 UX 팀이 디자인 시스템의 일부로 만들었으며 다양한 색상의 다양한 음영을 포함합니다. 가장 자주 사용되는 회색(회색) 팔레트입니다. 우리는 함께 코드베이스에 사용된 모든 색상을 분석하고 얼마나 많은 다른 음영이 사용되었는지 확인했습니다. UX는 이 팔레트를 생각해냈고 아름답게 작동했습니다.

엔지니어링에서는 정의된 팔레트를 다음과 같이 sass map 객체로 생성했습니다.

$palettes: (
        red: (
                600: #c6002b,
                500: #cd212e,
                400: #e22c3a,
                300: #f4747c,
                200: #f79096,
                100: #f4adb1,
        ),
        blue: (
                600: #0055b7,
                500: #509da7,
                400: #30bac6,
                300: #68c8d5,
                200: #84dae5,
                100: #a3e2eb,
        ),
        grey: (
                600: #27292d,
                500: #3f4447,
                400: #717277,
                300: #a9afb2,
                200: #e6eaed,
                100: #f6f8f9,
        ),
);

원래 우리는 색상 이름과 번호를 전달하여 올바른 색상을 찾기 위해 지도를 깊이 파고드는 sass function을 사용했습니다. 이 전술을 검토한 후 우리는 이것이 유지하기 어렵고 테마 계획과 잘 맞지 않는다는 것을 깨달았습니다. 그래서 우리는 use CSS custom properties 에 대한 모든 함수 호출을 교체했습니다. 약간의 실험 후 이 팔레트를 CSS 소품으로 만드는 가장 좋은 방법은 맵을 반복하고 결과를 :root{}에 덤프하는 것임을 발견했습니다.

:root {
    @each $colorname, $palette in $palettes {
        @each $key, $value in $palette {
            $keyname: "--palette-" + $colorname + "-" + $key;
            #{$keyname}: #{$value};
        }
    }
}

결과적으로 다음과 같은 결과가 나타납니다.

:root {
  --palette-red-600: #c6002b;
  --palette-red-500: #cd212e;
  --palette-red-400: #e22c3a;
  --palette-red-300: #f4747c;
  --palette-red-200: #f79096;
  --palette-red-100: #f4adb1;
  --palette-blue-600: #0055b7;
  --palette-blue-500: #509da7;
  --palette-blue-400: #30bac6;
  --palette-blue-300: #68c8d5;
  --palette-blue-200: #84dae5;
  --palette-blue-100: #a3e2eb;
  --palette-grey-600: #27292d;
  --palette-grey-500: #3f4447;
  --palette-grey-400: #717277;
  --palette-grey-300: #a9afb2;
  --palette-grey-200: #e6eaed;
  --palette-grey-100: #f6f8f9;
}

그런 다음 background-color: var(--palette-grey-100);와 같이 CSS var function을 사용해야 하는 모든 곳에서 사용합니다.

다음은 실제로 작동하는 것을 볼 수 있는 편리한 코드펜입니다.
들러 주셔서 감사합니다.