grid-col()

Grid 셀의 열(column) 믹스인

용도

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

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

사용법

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

grid-col($type:string, $value:[number, list])

.usage {
  // 키워드: start | s | end | e | start-end | se | span
  @include grid-col(se, 2 4);
}

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

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

.usage {
  grid-column-start: 2;
  grid-column-end: 4;
}

로직

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

@mixin grid-col($type, $value: null) {
  @if $type == 'span' {
    @include col-span($value);
  }
  @if $type == 'start' or $type == 's' {
    @include col-start($value);
  }
  @if $type == 'end' or $type == 'e' {
    @include col-end($value);
  }
  @if $type == 'start-end' or $type == 'se' {
    @include col-start(nth($value, 1));
    @include col-end(nth($value, 2));
  }
  @if not is-valid-keywords($type, span start end start-end s e se) {
    grid-column: if(type-of($type) == string, unquote($type), $type);
  }
}

1. 전달 받은 인자 값을 분석하여 조건 처리

참고

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

• @mixin / @include

• @if / @else

• type-of()

• unquote()

• if()

믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.

• row-span()

• row-start()

• row-end()

• is-valid-keywords()