> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/utilities/colors/alt-color.md).

# alt-color()

색 구성표(Color Scheme)에 등록된 컬러 이름이 없을 경우, 대체 컬러를 설정하는 유틸리티 함수

## 용도 <a href="#use" id="use"></a>

색 구성표에 등록된 컬러 이름을 우선 사용하되, 이름이 없을 경우 기본 값을 사용하도록 설정할 때 사용합니다.

{% hint style="info" %}
[환경 구성 변수 $colors](/scss-mixins/getting-started/configure.md#undefined)에 사용자가 임의로 컬러 이름에 매칭되는 값을 등록할 수 있습니다.
{% endhint %}

## 사용법 <a href="#usage" id="usage"></a>

`alt-color()` 함수에 확인 할 컬러 이름과 대체 컬러 값을 전달합니다.

> alt-color($name:**string**, $alt-color:**string**) → **color**

```javascript
@debug alt-color(white, #fff);     // #fefefe 반환
@debug has-color(indigo, #4b0082); // #4b0082 반환
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|      $name      |  string  |      ✔︎      |               |
|    $alt-value   |  string  |      ✔︎      |               |

## 로직 <a href="#logic" id="logic"></a>

`alt-color()` 유틸리티는 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@function alt-color($name, $alt-value) {
  @return if(has-color($name), get-color($name), $alt-value);
}
```

1. 전달 받은 컬러 이름(`$name`)이 [ $colors 구성 변수](/scss-mixins/getting-started/configure.md#undefined)에 등록된 이름인지 검사
2. 컬러 이름이 컬러 구성표에 포함된 이름인 경우, `true` 반환
3. 컬러 이름이 컬러 구성표에 포함되지 않은 이름인 경우, `false` 반환

## 참고 <a href="#reference" id="reference"></a>

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

* [if()](https://sass-lang.com/documentation/modules#if)

유틸리티 함수 로직에 사용된 자체 제작 모듈은 다음과 같습니다.

* [has-color()](/scss-mixins/utilities/colors/has-color.md)
* [get-color()](/scss-mixins/utilities/colors/get-color.md)