by 이듬(E.UID)

grid-cols()

grid-template-columns 속성 믹스인

용도

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

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

사용법

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

grid-cols($value:[string, number])

.usage {
  @include grid-cols(3); 
  // CSS 컴파일 결과
  // grid-template-columns: repeat(3, minmax(0, 1fr));
}

로직

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

@mixin grid-cols($value: null) {
  // 아무런 값을 전달 받지 않은 경우
  @if $value == null {
    @error 'grid-cols() 믹스인 사용 시, 숫자 또는 none 값을 전달해야 합니다.';
  }

  // none 값을 전달 받은 경우
  @if $value == 'none' {
    grid-template-columns: none;
  }

  $type: type-of($value);
  $unitless-value: unit($value);

  // 단위 없는 숫자 값만 전달받은 경우
  @if $type == 'number' and $unitless-value {
    grid-template-columns: repeat($value, minmax(0, 1fr));
  }

  // 단위가 있는 숫자 또는 리스트 값을 전달받은 경우
  @if $type == 'number' and not $unitless-value or $type == 'list' {
    grid-template-columns: $value;
  }
}

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

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

참고

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

Previousgrid-rows()Nextgrid-auto()

Last updated