# focus-visible()

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

[:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) 가상 클래스를 사용해 키보드 포커스와 마우스 포커스 상태를 다르게 처리할 때 사용합니다.

{% hint style="warning" %}
사용에 앞서 [:focus-visible 가상 클래스 브라우저 호환성](https://caniuse.com/mdn-css_selectors_focus-visible) 확인합니다. 모든 브라우저에서 호환되도록 하려면 폴리필 라이브러리 [focus-visible.js](https://github.com/WICG/focus-visible#polyfill)를 사용해야 합니다.
{% endhint %}

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

`focus-visible()` 믹스인을 호출합니다. 색상과 테두리 두께 값를 옵션으로 전달할 수 있습니다.

> focus-visible($color:**color**, $thickness:**number**)

```ruby
.focusVisible {
  @include focus-visible();
}
```

| 매개변수(parameter) | 유형(type) | 필수(required) |       기본 값(default)      |
| :-------------: | :------: | :----------: | :----------------------: |
|      $color     |   color  |              | `get-color(state-focus)` |
|    $thickness   |  number  |              |           `3px`          |

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

```css
.focusVisible:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 112, 212, 0.7);
}

.focusVisible:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.focusVisible:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 112, 212, 0.7);
}
```

#### 포커스 비저블 상태의 색과 두께를 설정

색상과 테두리 두께 값을 믹스인 호출 과정에 전달합니다.

```cpp
* {
  @include focus-visible(rgba(#20bebe, 0.655), rem(4));
}
```

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

```css
*:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(32, 190, 190, 0.655);
}

*:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(32, 190, 190, 0.655);
}
```

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

`focus-visible()` 믹스인은 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@mixin focus-visible(
  $color: rgba(alt-color(state-focus, #1870d4), 0.7),
  $thickness: 3px
) {
  &:focus {
    outline: none;
    box-shadow: 0 0 0 $thickness $color;
    @content;
  }

  &:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 $thickness $color;
    @content;
  }
}

```

1. 전달 받은 값이 없을 경우, 기본 값(색상, 테두리 두께)을 사용
2. 전달 받은 값이 있을 경우 색상, 테두리 두께 값을 설정하여 코드 출력

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

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [@content](https://sass-lang.com/documentation/at-rules/mixin#content-blocks)