order()

order 속성 믹스인

용도

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

order 속성은 플렉스박스 또는 CSS 그리드 레이아웃 안에서 아이템의 순서를 지정합니다.

사용법

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

order($value:[string, number])

.usage {
  @include order(first); // CSS 컴파일 결과 → order: -9999
}

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

로직

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

@mixin order($value) {
  @if not $value {
    @error 'order() 믹스인은 none, first, last 또는 정수 값을 전달 받아야 합니다.';
  }
  @if $value == 'none' {
    order: 0;
  }
  @if $value == 'first' {
    order: -9999;
  }
  @if $value == 'last' {
    order: 9999;
  }
  @if not is-valid-keywords($value, none first last) {
    order: $value;
  }
}

1. 전달 받은 인자 값이 없을 경우 오류 메시지 출력

2. 전달 받은 인자 값이 none, first, last 일 경우, 개별 조건 처리

3. 조건 유형에 맞지 않을 경우, 전달 받은 인자 값을 order 속성 값으로 설정

참고

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

• @mixin / @include

• @if / @else

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

• is-valid-keywords()