inherit-pseudo-elements()

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

용도

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

사용법

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

inherit-pseudo-elements($prop:string)

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

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

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

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

로직

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

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

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

참고

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

• @mixin / @include