auto-cols()

grid-auto-cols 속성 믹스인

용도

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

키워드 값	출력 값
auto	auto
min	min-content
max	max-content
fr	minmax(0, 1fr)

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

사용법

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

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

.usage {
  @include auto-cols(auto);
  @include auto-cols(min);
  @include auto-cols(max);
  @include auto-cols(fr);
  @include auto-cols(minmax(100px, 1fr));
}

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

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

.usage {
  grid-auto-columns: auto;
  grid-auto-columns: min-content;
  grid-auto-columns: max-content;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-columns: minmax(100px, 1fr);
}

로직

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

@mixin auto-cols($value: null) {
  // 아무런 값을 전달 받지 않은 경우
  @if $value == null {
    @error 'auto-cols() 믹스인 사용 시, 숫자 또는 문자, auto, min, max, fr 값을 전달해야 합니다.';
  }
  @if $value == auto {
    grid-auto-columns: auto;
  }
  @if $value == min {
    grid-auto-columns: min-content;
  }
  @if $value == max {
    grid-auto-columns: max-content;
  }
  @if $value == fr {
    grid-auto-columns: minmax(0, 1fr);
  }
  @if not is-valid-keywords($value, auto min max fr) {
    grid-auto-columns: $value;
  }
}

1. 전달 받은 인자 값이 없을 경우, 오류 메시지 출력

2. 전달 받은 인자 값이 있을 경우 각 키워드 또는 숫자 값을 분석하여 조건 처리

참고

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

• @mixin / @include

• @if / @else