Color 변수화하기 / css color 사전 정의하기

컬러 변수화를 어떻게 할 것인지를 정하기 전에 먼저 프로젝트 디자인에 사용된 컬러종류가 얼마나 되는지를 파악한다.
컬러 종류를 파악한다음 opacity값을 사용했는지, 각 컬러의 분류가 단계별로 증감되는 형식인지(그라데이션 팔레트를 사용했는지)에 따라 나누는 편이다. 그라데이션 팔레트를 사용했다면 scss의 map-get을 사용하고,  그렇지 않고 종류가 많지 않다면 일반변수로 정의한다.
--root를 사용하는 방식도 있지만 개인적으로는 선호하지 않으므로 생략

변수화하기 (컬러값의 종류가 많지 않을때)

$black:#000000;
$white:#FFFFFF;

$primary-black-1: #121212;
$primary-black-2: #999999;
$primary-black-3: #E0E0E0;
$primary-black-4: #FAFAFA;

$primary-red:#FF0000;
$primary-yellow:#FFD400;
$primary-green:#69BE94;

 

map-get 사용하기 (그라데이션 팔레트처럼 사용할때)

$grays: (
  "100": #FAFBFC,
  "200": #F8F8F8,
  "300": #F1F1F1,
  "400": #E3E3E3,
  "500": #CDCACA,
  "600": #AEAEAE,
  "700": #7C7C7C,
  "800": #787878,
  "900": #414141,
);

@each $key, $value in $grays {
  .text-gray#{$key} {
    color: $value !important;
  }
  .bg-gray#{$key} {
    background-color: $value !important;
  }
}


/* 사용 */

$border-color:map-get($grays, "400");

 

사용

<p class="text-gray200">test1</p>
<p class="text-gray700">test2</p>