grid-auto()

grid-auto-* 속성 믹스인

용도

grid-auto-* 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

• grid-auto-rows

• grid-auto-columns

• grid-auto-flow

믹스인에서 사용되는 리스트 값	컴파일 되는 표준 속성
flow 또는 f → row column dense row-dense column-dense rows 또는 r → auto min max fr cols 또는 c → auto min max fr	grid-auto-flow, grid-auto-rows, grid-auto-columns

사용법

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

grid-auto($args:list)

.usage {
  @include grid-auto(f row-dense r min c max);
}

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

위 코드는 다음의 CSS 코드로 출력됩니다.

.usage {
  grid-auto-flow: row dense;
  grid-auto-rows: min-content;
  grid-auto-columns: max-content;
}

로직

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

@mixin grid-auto($args: null) {
  @if $args != null and is-include-items($args, flow f rows r cols c) {
    $flow-value: get-match-value-of-keys($args, flow f);
    @if $flow-value {
      @include auto-flow($flow-value);
    }

    $rows-value: get-match-value-of-keys($args, rows r);
    @if $rows-value {
      @include auto-rows($rows-value);
    }

    $cols-value: get-match-value-of-keys($args, cols c);
    @if $cols-value {
      @include auto-cols($cols-value);
    }
  }
}

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

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

참고

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

• @mixin / @include

• @if / @else

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

• auto-flow()

• auto-rows()

• auto-cols()

• is-include-items()

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