> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/mixins/display/order.md).

# order()

order 속성 믹스인

## 용도 <a href="#use" id="use"></a>

[order](https://developer.mozilla.org/ko/docs/Web/CSS/order) 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

{% hint style="info" %}
order 속성은 [플렉스박스](/scss-mixins/mixins/flexbox.md) 또는 [CSS 그리드](/scss-mixins/mixins/css-grid.md) 레이아웃 안에서 아이템의 순서를 지정합니다.
{% endhint %}

## 사용법 <a href="#usage" id="usage"></a>

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

> order($value:**\[string, number]**)

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

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

## 로직 <a href="#logic" id="logic"></a>

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

```ruby
@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` 속성 값으로 설정

## 참고 <a href="#reference" id="reference"></a>

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

* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)

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

* [is-valid-keywords()](/scss-mixins/utilities/validation/is-valid-keywords.md)