get-color()

색 구성표(Color Scheme)에 등록된 컬러 값 반환 유틸리티 함수

용도

색 구성표에 등록된 수 많은 컬러 값(예: #28120e)을 암기하는 것은 매우 어렵습니다. 하지만 컬러 이름(bean)은 상대적으로 기억하기 용이합니다. 컬러 이름을 전달해 매칭되는 컬러 값을 추출할 수 있어 일관된 컬러 시스템을 구축, 활용하는데 유용하게 사용 할 수 있습니다.

사용 예

• 배경, 전경, 테두리, 그림자 등 색을 일관적으로 관리해야 하는 경우

• 컬러 이름을 통해 연결된 값을 사용해야 할 경우 (gray → #787878)

환경 구성 변수 $colors에 사용자가 임의로 컬러 이름에 매칭되는 값을 등록할 수 있습니다.

사용법

get-color() 함수에 등록된 컬러 이름을 전달합니다. (이름과 매칭되는 컬러 값 반환)

get-color($name:string) → color

.usage {
  background: get-color(black); // #010101 반환
  color: get-color(white);      // #fefefe 반환
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$name	string	✔︎	null

로직

get-color() 유틸리티는 다음의 로직에 의해 작성되었습니다.

@function get-color($name: null) {
  @if has-color($name) {
    @return map-get($colors, $name);
  } @else {
    @error '설정 가능한 컬러 값은 #{map-keys($colors)} 중 하나입니다.';
  }
}

1. 전달 받은 컬러 이름($name)이 $colors 구성 변수에 등록된 값이 유효한 지 검사
2. 등록된 컬러 이름과 동일한 경우, 컬러 값을 반환

3. 등록된 컬러 이름과 일치하지 않을 경우, 오류 출력

참고

유틸리티 함수 로직에 사용된 Sass 빌트인 모듈은 다음과 같습니다.

• map-get()
• map-keys()

믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.

• has-color()

Sass의 Map 자료형(Data Type)은 JavaScript의 Object와 유사합니다.

Sass: sass:map