grid-cols()

grid-template-columns 속성 믹스인

용도

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

믹스인에서 사용되는 값

컴파일 되는 표준 속성

2 또는 none 또는 auto 또는 1fr repeat(2, 2fr) 1fr

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));
}

매개변수(parameter)

유형(type)

필수(required)

기본 값(default)

$value

[string, number]

✔︎

로직

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의 빌트인 모듈은 다음과 같습니다.

Last updated

Was this helpful?