reset-box-sizing()

박스 크기(Box Sizing) 기준 초기화 설정 믹스인

용도

요소의 박스 크기 기준을 초기화 설정하는 믹스인입니다. (모든 자손 요소, 가상 요소 속성 상속 됨)

사용법

reset-box-sizing() 믹스인에 초기 설정할 값을 전달합니다.

reset-box-sizing($value:string)

@include reset-box-sizing();

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

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

html {
  box-sizing: border-box;
}

body {
  box-sizing: border-box;
}
body::before, body::after {
  box-sizing: inherit;
}

body * {
  box-sizing: inherit;
}
body *::before, body *::after {
  box-sizing: inherit;
}

로직

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

@mixin reset-box-sizing($value: border-box) {
  @include inherit-box-sizing('body', $value);
}

1. 전달 받은 인자가 없을 경우, 기본 설정 값으로 border-box 사용

2. 설정 값을 body 요소를 포함해 모든 자손 요소(가상 요소 포함)에 상속되도록 inherit-box-sizing() 믹스인 호출

참고

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

• @mixin / @include

• @if / @else

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

• inherit-box-sizing()