align-self()

align-self 믹스인

용도

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

사용법

align-self() 믹스인에 정렬 키워드를 전달합니다. (flex 모드 옵션 설정 가능)

align-self($value:string, $mode:string)

.usage {
  @include align-self(start, flex);
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$value	string	✔︎
$mode	string		grid

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

.usage {
  align-self: flex-start;
}

로직

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

@mixin align-self($value, $mode: grid) {
  @if $value == 'auto' {
    align-self: auto;
  }

  @if $value == 'normal' {
    align-self: normal;
  }

  @if $value == 'start' {
    align-self: if($mode == grid, start, flex-start);
  }
  @if $value == 'end' {
    align-self: if($mode == grid, end, flex-end);
  }
  @if $value == 'center' {
    align-self: center;
  }
  @if $value == 'stretch' {
    align-self: stretch;
  }

  @if $value == 'baseline' {
    align-self: baseline;
  }
  @if $value == 'first-baseline' {
    align-self: first baseline;
  }
  @if $value == 'last-baseline' {
    align-self: last baseline;
  }

  @if $value == 'safe' {
    align-self: safe center;
  }
  @if $value == 'unsafe' {
    align-self: unsafe center;
  }

  @if $value == 'inherit' {
    align-self: inherit;
  }
  @if $value == 'initial' {
    align-self: initial;
  }
  @if $value == 'unset' {
    align-self: unset;
  }
}

1. 전달 받은 인자 값을 분석해 내부적으로 조건 처리

2. 조건과 일치하는 경우, 코드 출력

참고

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

• @mixin / @include

• if()