flex-container-append()

Flex 컨테이너 첨부(append) 믹스인

용도

기본적으로는 flex-container() 믹스인 내부에서 호출되어 사용되며 Flex Container 요소에 설정 가능한 속성 중 display 를 제외한 나머지 속성을 전달 받은 값을 해석하여 설정합니다. 이 믹스인은 초기 설정 후, 반응형 웹 디자인 (미디어 쿼리에 의해 레이아웃이 변경)에서 유용하게 사용될 수 있습니다.

믹스인에 사용 가능한 값

믹스인에서 사용되는 값	컴파일 되는 표준 속성
row | column | row-reverse | column-reverse	flex-direction
nowrap | wrap | wrap-reverse	flex-wrap
justify-start | justify-center | justify-end | justify-between | justify-around | justify-evenly | justify-normal | justify-left | justify-right | justify-safe | justify-unsafe | justify-inherit | justify-initial | justify-unset	justify-content
items-start | items-center | items-end | items-stretch | items-baseline | items-first-baseline | items-last-baseline | items-safe | items-unsafe | items-inherit | items-initial | items-unset	align-items
content-start | content-center | content-end | content-between | content-around | content-evenly | content-stretch | content-baseline | content-first-baseline | content-last-baseline | content-normal | content-left | content-right | content-safe | content-unsafe | content-inherit | content-initial | content-unset	align-content

사용법

flex-container-append() 믹스인에 설정 가능한 값을 리스트로 전달합니다.

flex-container-append($args:list)

.usage {
  @include flex-container-append(justify-evenly content-stretch);
}

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

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

.usage {
  justify-content: space-evenly;
  align-content: stretch;
}

flex-container-append() 믹스인 보다 간추려 쓰기 위한 flex-c-a() 믹스인 이름도 제공합니다.

.usage {
  @include flex-c-a(justify-evenly items-stretch);
}

로직

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

@mixin flex-container-append($args) {
  @if $args != null {
    // flex-direction ------------------------------------------
    @each $direction in row row-reverse column column-reverse {
      $direction-index: index($args, $direction);

      @if $direction-index {
        flex-direction: nth($args, $direction-index);
      }
    }

    // flex-wrap -----------------------------------------------
    @each $wrap in nowrap wrap wrap-reverse {
      $wrap-index: index($args, $wrap);

      @if $wrap-index {
        flex-wrap: nth($args, $wrap-index);
      }
    }

    // justify-content ------------------------------------------
    @each $justifyContent
      in justify-start
      justify-center
      justify-end
      justify-left
      justify-right
      justify-normal
      justify-between
      justify-around
      justify-evenly
      justify-safe
      justify-unsafe
      justify-inherit
      justify-initial
      justify-unset
    {
      $justifyContent-index: index($args, $justifyContent);

      @if $justifyContent-index {
        $justifyContent-value: str-replace(
          nth($args, $justifyContent-index),
          'justify-'
        );
        @include justify-content($justifyContent-value, flex);
      }
    }

    // align-items ------------------------------------------------
    @each $alignItems
      in items-normal
      items-stretch
      items-start
      items-end
      items-center
      items-baseline
      items-first-baseline
      items-last-baseline
      items-safe
      items-unsafe
      items-inherit
      items-initial
      items-unset
    {
      $alignItems-index: index($args, $alignItems);

      @if $alignItems-index {
        $alignItems-value: str-replace(nth($args, $alignItems-index), 'items-');
        @include align-items($alignItems-value, flex);
      }
    }

    // align-content ------------------------------------------------
    @each $alignContent
      in content-start
      content-center
      content-end
      content-left
      content-right
      content-normal
      content-baseline
      content-first-baseline
      content-last-baseline
      content-between
      content-around
      content-evenly
      content-stretch
      content-safe
      content-unsafe
      content-inherit
      content-initial
      content-unset
    {
      $alignContent-index: index($args, $alignContent);

      @if $alignContent-index {
        $alignContent-value: str-replace(
          nth($args, $alignContent-index),
          'content-'
        );
        @include align-content($alignContent-value, flex);
      }
    }
  }
}

1. $mode 매개변수에 값이 전달되지 않을 경우, 기본 값인 flex로 표시(display) 모드 설정

2. $args 매개변수로 리스트 값이 전달되면 flex-container-append() 믹스인에 전달

flex-c-a() 믹스인은 flex-container-append() 믹스인 래퍼로 보다 간단하게 쓰기 위해 작성되었습니다.

@mixin flex-c-a($args) {
  @include flex-container-append($args);
}

참고

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

• @if / @else

• @each

• @mixin / @include

• index()

• nth()

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

• str-replace()

• justify-content()

• align-items()

• align-content()