gap()

gap 속성 믹스인

용도

gap (또는 row-gap, column-gap) 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

믹스인에서 사용되는 값	컴파일 되는 표준 속성
10 또는 10px 5px 또는 rem(14)	gap 또는 row-gap, column-gap

gap() 믹스인은 grid-container-append() 믹스인 내부에서 활용되는 작은 모듈입니다.

사용법

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

gap($value:[number, list])

.usage {
  @include gap(10 5); 
  // CSS 컴파일 결과
  // row-gap: 10px;
  // column-gap: 5px;
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$value	[string, number]	✔︎

로직

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

@mixin gap($value: null) {
  @if $value == null {
    @error 'gap() 믹스인은 숫자 값을 1 또는 2개의 값을 전달 받아야 합니다.';
  }
  @if length($value) == 1 {
    gap: unitless-px($value);
  }
  @if length($value) == 2 {
    row-gap: unitless-px(nth($value, 1));
    column-gap: unitless-px(nth($value, 2));
  }
}

1. 전달 받은 인자 값이 숫자, 리스트 유형일 경우 개별 조건 처리

2. 조건 유형에 맞지 않을 경우, 오류 메시지 출력

참고

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

• @mixin / @include
• @if / @else
• length()
• nth()

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

• unitless-px()