# inherit-box-sizing()

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

요소의 박스 크기 기준을 설정하는 믹스인으로 요소가 포함하는 모든 하위 요소들까지 상속 받도록 설정합니다.

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

`inherit-box-sizing()` 믹스인에 선택자, 그리고 설정 값을 전달합니다.

> inherit-box-sizing($selector:**string**, $value:**string**)

```ruby
@include inherit-box-sizing('.usage');
```

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

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

```css
.usage {
  box-sizing: border-box;
}
.usage::before, .usage::after {
  box-sizing: inherit;
}
.usage * {
  box-sizing: inherit;
}
.usage *::before, .usage *::after {
  box-sizing: inherit;
}
```

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

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

```javascript
@mixin inherit-box-sizing($selector: null, $value: border-box) {
  @if $selector != null {
    #{$selector} {
      box-sizing: $value;
      @include inherit-pseudo-contents(box-sizing);
      * {
        box-sizing: inherit;
        @include inherit-pseudo-contents(box-sizing);
      }
    }
  }
}
```

1. 전달 받은 선택자가 없을 경우, 오류 메시지 출력
2. 전달 받은 선택자가 있을 경우, 조건 처리
3. 전달 받은 설정 값을 `box-sizing` 속성에 설정
4. 가상 요소에도 속성을 상속 받도록 [inherit-pseudo-elements()](https://yamoo9.gitbook.io/scss-mixins/mixins/inheritance/inherit-pseudo-elements) 믹스인 호출

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

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

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

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

* [inherit-pseudo-elements()](https://yamoo9.gitbook.io/scss-mixins/mixins/inheritance/inherit-pseudo-elements)