> 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/spacing/mx.md).

# mx()

마진(Margin) X축 단축 믹스인

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

[margin()](/scss-mixins/mixins/spacing/margin.md) 믹스인의 `x`축(`left`, `right`) 값을 빠르게 설정하기 위한 단축 믹스인입니다.

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

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

> mx($args:**list**)

```ruby
.usage {
  @include mx(auto);
}
```

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

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

```css
.usage {
  margin-right: auto;
  margin-left: auto;
}
```

#### &#x20;X축 속성의 개별 값을 설정할 경우

```ruby
.usage {
  @include mx(5% 10%);
}
```

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

```css
.usage {
  margin-right: 10%;
  margin-left: 5%;
}
```

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

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

```javascript
@mixin mx($value) {
  $value_length: length($value);
  @if $value_length == 1 {
    @include m(l $value r $value);
  }
  @if $value_length == 2 {
    @include m(l first($value) r last($value));
  }
}
```

1. 전달 받은 인자의 아이템 개수(length) 확인
2. 개수가 1개인 경우, [m()](/scss-mixins/mixins/spacing/margin-m.md) 믹스인의 인자 값으로 좌(l), 우(r) 값 설정 호출
3. 개수가 2개인 경우, [m()](/scss-mixins/mixins/spacing/margin-m.md) 믹스인의 인자 값으로 좌(l), 우(r) 값 개별 설정 호출

## 참고 <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)
* [length()](https://sass-lang.com/documentation/modules/list#length)

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

* [m()](/scss-mixins/mixins/spacing/margin-m.md)