Grid Item 요소에 설정 가능한 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.
grid-item($area:[string, list], $align:list)
.usage {
@include grid-item(
(2 3, 1 2),
justify-self-center self-center
);
}
위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.
.usage {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
justify-self: center;
align-self: center;
}
@mixin grid-item($area: null, $align: null) {
// ——————————————————————————————————————————————
// grid-row,column,area
@if $area != null {
$type: type-of($area);
// grid-area
@if $type == 'string' {
@include grid-area($area);
}
// grid-row
// grid-column
@if $type == 'list' {
$row-value: first($area);
$col-value: last($area);
@include grid-area($row-value, $col-value);
}
}
// ——————————————————————————————————————————————
// box alignment
@if $align != null {
// justify-self
$justify-self-values: (
justify-self-auto,
justify-self-normal,
justify-self-stretch,
justify-self-start,
justify-self-center,
justify-self-end,
justify-self-left,
justify-self-right,
justify-self-baseline,
justify-self-first-baseline,
justify-self-last-baseline,
justify-self-safe,
justify-self-unsafe,
justify-self-inherit,
justify-self-initial,
justify-self-unset
);
@if is-include-items($align, $justify-self-values) {
@each $value in $align {
@if str-index($value, 'justify-self-') {
@include justify-self(str-replace($value, 'justify-self-'));
}
}
}
// align-self
$align-self-values: (
self-normal,
self-stretch,
self-start,
self-center,
self-end,
self-baseline,
self-first-baseline,
self-last-baseline,
self-safe,
self-unsafe,
self-inherit,
self-initial,
self-unset
);
@if is-include-items($align, $align-self-values) {
@each $value in $align {
@if str-index($value, 'self-') and not
str-index($value, 'justify-self-')
{
@include align-self(str-replace($value, 'self-'));
}
}
}
}
}
@mixin grid-i($area: null, $align: null) {
@include grid-item($area, $align);
}
믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.
믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.