inherit-box-sizing()

박스 크기(Box Sizing) 기준 설정을 상속하는 믹스인

용도

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

사용법

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

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

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

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

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

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

로직

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

@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() 믹스인 호출

참고

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

• @mixin / @include

• @if / @else

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

• inherit-pseudo-elements()