position()

포지션(Position) 믹스인

용도

포지션(position) 레이아웃을 위한 개별 속성을 빠르게 설정할 때 사용하는 믹스인입니다.

사용법

position() 믹스인에 포지션 타입과 설정 가능한 키:값을 리스트로 전달합니다.

position($type:string, $args:list)

.usage {
  @include position(absolute, t 0 r 0 b 0 l 0 z 1000);
}

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

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

.usage {
  position: absolute;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

믹스인에 설정 가능한 속성 키워드 및 값 유형

속성 키워드	값 유형	컴파일 속성
top 또는 t	number, number(unitless), string	top
right 또는 r	number, number(unitless), string	right
bottom 또는 b	number, number(unitless), string	bottom
left 또는 l	number, number(unitless), string	left
z-index 또는 z	number	z-index

로직

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

@mixin position($position, $args: null) {
  position: $position;

  @if $args != null {
    $top-value: get-match-value-of-keys($args, top t);
    $right-value: get-match-value-of-keys($args, right r);
    $bottom-value: get-match-value-of-keys($args, bottom b);
    $left-value: get-match-value-of-keys($args, left l);

    z-index: get-match-value-of-keys($args, z-index z);
    top: if($top-value, unitless-px($top-value), null);
    right: if($right-value, unitless-px($right-value), null);
    bottom: if($bottom-value, unitless-px($bottom-value), null);
    left: if($left-value, unitless-px($left-value), null);
  }
}

1. 전달 받은 인자 중, 포지션 타입 값을 position 속성 값으로 설정

2. 전달 받은 인자 $args가 있을 경우, 리스트 분석 후 개별 속성 설정

참고

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

• @mixin / @include

• @if / @else

• if()

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

• get-match-value-of-keys()

• unitless-px()