> 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/inheritance/inherit-pseudo-elements.md).

# inherit-pseudo-elements()

가상 요소에 설정 속성을 상속하는 믹스인

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

요소의 가상 요소들에 설정된 속성을 상속 받도록 설정할 때 사용합니다.

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

`inherit-pseudo-elements()` 믹스인에 상속할 속성을 전달합니다.

> inherit-pseudo-elements($prop:**string**)

```ruby
.usage {
  font-size: rem(14);
  @include inherit-pseudo-elements(font-size);
}
```

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

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

```css
.usage {
  font-size: 0.875rem;
}
.usage::before, .usage::after {
  font-size: inherit;
}
```

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

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

```javascript
@mixin inherit-pseudo-elements($prop) {
  &::before,
  &::after {
    #{$prop}: inherit;
  }
}
```

1. 전달 받은 속성을 요소의 가상 요소(들)에서 상속 받도록 설정

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

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

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