col-span()

grid-column 속성 span 믹스인

용도

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

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

사용법

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

col-span($value:[number, string])

.usage {
  @include col-span(full);
}

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

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

.usage {
  grid-column: 1 / -1;
}

로직

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

@mixin col-span($n: null) {
  @if type-of($n) != 'number' and $n != 'full' {
    @error 'col-span() 믹스인은 숫자 또는 full 문자 값만 전달 받을 수 있습니다.';
  }
  @if $n == 'full' {
    grid-column: unquote('1 / -1');
  } @else {
    grid-column: unquote('span #{$n} / span #{$n}');
  }
}

1. 전달 받은 인자 값을 분석하여 유효하지 않을 경우 오류 메시지 출력

2. 유효한 경우 grid-column 값으로 설정

참고

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

• @mixin / @include

• @if / @else

• @error

• type-of()

• unquote()