grid-area()

CSS Grid 영역 믹스인

용도

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

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

사용법

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

grid-area($row:[string, number, list], $col:[number, list])

.usage {
  @include grid-area(1 2, span 2);
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$row	[string, number, list]		null
$col	[number, list]		null

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

.usage {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column: span 2 / span 2;
}

사용 예시

예시 1. 문자 값

.usage {
  @include grid-area('search-bar');
}

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

.usage {
  grid-area: "search-bar";
}

예시 2. 숫자 값

.usage {
  @include grid-area(1, 1);
}

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

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

예시 3. 리스트 값

.usage {
  @include grid-area(1 3, 2 3);
}

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

.usage {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}

예시 4-1. 키워드를 포함한 리스트 값 (키워드: start | s | end | e)

.usage {
  @include grid-area(s 1, e 1); // s = start, e = end
}

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

.usage {
  grid-row-start: 1;
  grid-column-end: 1;
}

예시 4-2. 키워드를 포함한 리스트 값 (키워드: span)

.usage {
  @include grid-area(span 2, span full);
}

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

.usage {
  grid-row: span 2 / span 2;
  grid-column: 1 / -1;
}

예시 5. /를 포함한 문자 값

.usage {
  @include grid-area('1 / 3', '2 / 3');
}

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

.usage {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

로직

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

@mixin grid-area($rows: null, $cols: null) {
  $rows-type: type-of($rows);
  $cols-type: type-of($cols);

  @if $rows-type == 'list' {
    $span-value: get-match-value-of-keys($rows, span);
    $start-value: get-match-value-of-keys($rows, start s);
    $end-value: get-match-value-of-keys($rows, end e);
    @if $span-value {
      @include grid-row(span, $span-value);
    } @else if $start-value {
      @include grid-row(start, $start-value);
    } @else if $end-value {
      @include grid-row(end, $end-value);
    } @else {
      @include grid-row(se, $rows);
    }
  }
  
  @if $rows-type == 'number' or $rows-type == 'string' and str-index($rows, '/') {
    @include grid-row($rows);
  }

  @if $cols-type == 'list' {
    $span-value: get-match-value-of-keys($cols, span);
    $start-value: get-match-value-of-keys($cols, start s);
    $end-value: get-match-value-of-keys($cols, end e);
    @if $span-value {
      @include grid-col(span, $span-value);
    } @else if $start-value {
      @include grid-col(start, $start-value);
    } @else if $end-value {
      @include grid-col(end, $end-value);
    } @else {
      @include grid-col(se, $cols);
    }
  }
  
  @if $cols-type == 'number' or $cols-type == 'string' and str-index($cols, '/') {
    @include grid-col($cols);
  }

  // 그리드 영역(grid-area)을 문자 값으로 전달한 경우
  @if $rows-type == 'string' and not str-index($rows, '/') {
    grid-area: $rows;
  }
}

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

참고

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

• @mixin / @include
• @if / @else
• type-of()
• str-index()

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

• get-match-value-of-keys()
• grid-row()
• grid-col()