grid-cols()
grid-template-columns 속성 믹스인
용도
grid-template-columns 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.
믹스인에서 사용되는 값
컴파일 되는 표준 속성
2
또는 none
또는 auto
또는 1fr repeat(2, 2fr) 1fr
grid-template-columns
사용법
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;
}
}
전달 받은 인자 값이
none
키워드 또는 숫자, 리스트 유형일 경우, 개별 조건 처리조건 유형에 맞지 않을 경우, 오류 메시지 출력
참고
믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.
Last updated
Was this helpful?