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} 컬러 값과 매칭되는 컬러 이름이 존재하지 않습니다.';
  }
}