> 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/mixins/interface/selection.md).

# selection()

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

선택 영역([::selection](https://developer.mozilla.org/en-US/docs/Web/CSS/::selection)) 스타일을 설정하는 믹스인입니다.

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

`selection()` 믹스인을 실행하고, 스타일 콘텐츠를 중괄호 안에 입력합니다.

> selection($selector:**string**) { **@content**; }

```ruby
@include selection() {
  color: get-color(white);
  background-color: get-color(black);
}

@include selection('img, button') {
  color: get-color(black);
  background-color: transparent;
}
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|    $selector    |  string  |              |     `null`    |

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

```css
::-moz-selection {
  color: #fefefe;
  background-color: #010101;
}

::selection {
  color: #fefefe;
  background-color: #010101;
}

img::-moz-selection {
  color: #010101;
  background-color: transparent;
}

img::selection {
  color: #010101;
  background-color: transparent;
}

button::-moz-selection {
  color: #010101;
  background-color: transparent;
}

button::selection {
  color: #010101;
  background-color: transparent;
}
```

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

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

```javascript
@mixin selection($selector: null) {
  @if $selector == null {
    ::-moz-selection {
      @content;
    }
    ::selection {
      @content;
    }
  } @else {
    @each $selector in str-split($selector, ',') {
      #{$selector}::-moz-selection {
        @content;
      }
      #{$selector}::selection {
        @content;
      }
    }
  }
}

```

1. 전달 받은 값이 없을 경우, 모든 요소에 `::selection` 스타일 설정
2. 외부로부터 전달 받은 콘텐츠(`@content`) 코드 출력
3. 전달 받은 값이 있을 경우, 선택자 문자 값을 구분 기호로 나눠 리스트로 처리
4. 리스트를 순환하여 개별 선택자에 `::selection` 스타일 설정
5. 외부로부터 전달 받은 콘텐츠(@content) 코드 출력

## 참고 <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)
* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)
* [@each](https://sass-lang.com/documentation/at-rules/control/each)

믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.

* [str-split()](/scss-mixins/utilities/string/str-split.md)