show()

표시(display) 모드 설정 믹스인

용도

표시(display) 모드를 설정하는 믹스인입니다.

사용법

show() 믹스인에 설정 가능한 값을 전달합니다.

show($mode:string)

.usage {
  @include show(grid);
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$mode	string		block

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

.usage {
  display: grid;
}

믹스인에 설정 가능한 값

• block (기본 값)

• inline

• inline-block

• flex

• inline-flex

• grid

• inline-grid

• table

• inline-table

• flow

• flow-root

• contents

• none

추가적으로 설정 가능한 display 속성 값은 CSS Display Module을 참고하세요.

로직

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

@mixin show($mode: block) {
  display: $mode;
}

1. 전달 받은 모드 값이 없을 경우, block 값을 기본 설정

2. 전달 받은 모드 값이 있을 경우, 전달된 값을 설정

참고

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

• @mixin / @include