> 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/display/show.md).

# show()

표시(display) 모드 설정 믹스인

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

표시(display) 모드를 설정하는 믹스인입니다.

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

`show()` 믹스인에 설정 가능한 값을 전달합니다.

> show($mode:**string**)

```ruby
.usage {
  @include show(grid);
}
```

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

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

```css
.usage {
  display: grid;
}
```

#### 믹스인에 설정 가능한 값

* `block` (기본 값)
* `inline`
* `inline-block`
* `flex`
* `inline-flex`
* `grid`
* `inline-grid`
* `table`
* `inline-table`
* `flow`
* `flow-root`
* `contents`
* `none`

{% hint style="info" %}
추가적으로 설정 가능한 display 속성 값은 [CSS Display Module](https://drafts.csswg.org/css-display/#the-display-properties)을 참고하세요.
{% endhint %}

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

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

```css
@mixin show($mode: block) {
  display: $mode;
}
```

1. 전달 받은 모드 값이 없을 경우, `block` 값을 기본 설정
2. 전달 받은 모드 값이 있을 경우, 전달된 값을 설정

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

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

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