auto-flow()
grid-auto-flow 속성 믹스인
용도
grid-auto-flow 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.
키워드 값
출력 값
row
row
column
column
dense
dense
row-dense
row dense
column-dense
column dense
inherit
inherit
initial
initial
unset
unset
사용법
auto-
flow()
믹스인에 설정 가능한 값을 전달합니다.
auto-flow($value:string)
.usage {
@include auto-flow(row-dense);
}
매개변수(parameter)
유형(type)
필수(required)
기본 값(default)
$value
string
✔︎
위 코드는 다음의 CSS 코드로 출력됩니다.
.usage {
grid-auto-flow: row dense;
}
로직
auto-cols()
믹스인은 다음의 로직에 의해 작성되었습니다.
@mixin auto-flow($value: null) {
$keywords: (
row,
column,
dense,
row-dense,
column-dense,
inherit,
initial,
unset
);
@if $value == null or not is-valid-keywords($value, $keywords) {
@error 'auto-flow() 믹스인은 #{$keywords} 값만 전달 받을 수 있습니다.';
}
grid-auto-flow: str-replace($value, '-', ' ');
}
전달 받은 인자 값이 없을 경우, 오류 메시지 출력
전달 받은 인자 값이 있을 경우 각 키워드 또는 숫자 값을 분석하여 조건 처리
참고
믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.
Last updated
Was this helpful?