get-color-name()

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

용도

get-color() 유틸리티 함수와 유사하지만, 색 구성표에 등록된 컬러 이름을 반환하는 점이 다릅니다. 등록된 컬러 이름이 생각나지 않을 경우 디자인 시안에서 복사한 16진수 값을 전달해 컬러 이름 값을 확인할 때 사용합니다.

사용 예

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

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

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

사용법

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

get-color-name($value:color) → string

@debug get-color-name(#010101); // black 반환

// 매칭되는 컬러 값이 없을 경우 오류 출력
// Error: "#323232 컬러 값과 매칭되는 컬러 이름이 존재하지 않습니다."
@debug get-color-name(#323232);

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

로직

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

@function get-color-name($value: null) {
  $color-keys: map-keys($colors);     // map → list
  $color-values: map-values($colors); // map → list
  $color-value-index: index($color-values, $value); // list → number
  @if $color-value-index {
    @return nth($color-keys, $color-value-index); // list → string
  } @else {
    @error '#{$value} 컬러 값과 매칭되는 컬러 이름이 존재하지 않습니다.';
  }
}

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

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

참고

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

• map-keys()
• map-values()
• index()
• nth()

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

Sass: sass:map

Sass: sass:list