grid-areas()

grid-template-areas 속성 믹스인

용도

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

사용법

grid-areas() 믹스인에 설정 가능한 값을 전달합니다. (CSS 표준과 달리 연속된 키워드는 x 표기로 처리 가능)

grid-areas($areas:list)

.usage {
  @include grid-areas('header x3' '. main .' 'footer x3');
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$areas	list	✔︎

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

.usage {
  grid-template-areas: "header header header" 
                       ". main ." 
                       "footer footer footer";
}

포함된 일부 텍스트를 반복 처리해야 할 경우

동일한 텍스트가 아닌, 일부 텍스트만 반복 처리해야 할 경우는 str-repeat() 유틸리티 함수를 사용합니다.

.usage {
  @include grid-areas('header x4' '. #{str-repeat(2, main)} .' 'footer x4');
}

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

.usage {
  grid-template-areas: "header header header header" 
                       ". main main ." 
                       "footer footer footer footer";
}

로직

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

@mixin grid-areas($areas: null) {
  $areas-list: ();

  @each $area in $areas {
    $compiled-text: str-extract-count-keyword($area);

    @if type-of($compiled-text) == 'map' {
      $compiled-text: str-repeat(
        map-get($compiled-text, count),
        map-get($compiled-text, keyword)
      );
    }

    $areas-list: append($areas-list, $compiled-text);
  }

  grid-template-areas: $areas-list;
}

1. 전달 받은 문자 리스트를 순환 처리

2. 문자 리스트로부터 카운트, 키워드 추출

3. 추출된 데이터 유형이 맵일 경우, 카운트 횟수 만큼 키워드 반복 처리

4. 빈 문자 리스트의 아이템으로 반복 출력된 문자 추가

5. 추출된 데이터 유형이 맵이 아닐 경우, 전달 받은 문자 리스트 그대로 반환

참고

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

• @mixin / @include
• @if / @else
• @each
• type-of()
• map-get()
• append()

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

• str-extract-count-keyword()
• str-repeat()