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)} 중 하나입니다.';
  }
}