align-content()
align-content 믹스인
용도
align-content 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.
사용법
align-content()
믹스인에 정렬 키워드를 전달합니다.
align-content($value:string, $mode:string)
.usage {
@include align-content(start, flex);
@include align-content(evenly);
}
매개변수(parameter)
유형(type)
필수(required)
기본 값(default)
$value
string
✔︎
$mode
string
grid
위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.
.usage {
align-content: flex-start;
align-content: space-evenly;
}
로직
align-content()
믹스인은 다음의 로직에 의해 작성되었습니다.
@mixin align-content($value, $mode: grid) {
@if $value == 'start' {
align-content: if($mode == grid, start, flex-start);
}
@if $value == 'end' {
align-content: if($mode == grid, end, flex-end);
}
@if $value == 'center' {
align-content: center;
}
@if $value == 'left' {
align-content: left;
}
@if $value == 'right' {
align-content: right;
}
@if $value == 'normal' {
align-content: normal;
}
@if $value == 'baseline' {
align-content: baseline;
}
@if $value == 'first-baseline' {
align-content: first baseline;
}
@if $value == 'last-baseline' {
align-content: last baseline;
}
@if $value == 'between' {
align-content: space-between;
}
@if $value == 'around' {
align-content: space-around;
}
@if $value == 'evenly' {
align-content: space-evenly;
}
@if $value == 'stretch' {
align-content: stretch;
}
@if $value == 'safe' {
align-content: safe center;
}
@if $value == 'unsafe' {
align-content: unsafe center;
}
@if $value == 'inherit' {
align-content: inherit;
}
@if $value == 'initial' {
align-content: initial;
}
@if $value == 'unset' {
align-content: unset;
}
}
전달 받은 인자 값을 분석해 내부적으로 조건 처리
조건과 일치하는 경우, 코드 출력
참고
믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.
Last updated
Was this helpful?