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

# sx()

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

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

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

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

> sx($value:**\[number, list]**)

```ruby
.usage {
  @include sx(rem(10) r);
}
```

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

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

```css
.usage > :not([hidden]) ~ :not([hidden]) {
  margin-right: 0rem;
  margin-left: 0.625rem;
}
```

#### 믹스인에 설정 가능한 속성 키워드 별 공간 방향 설정

| 속성 키워드           | 컴파일 속성                   |
| ---------------- | ------------------------ |
| `normal`         | 공간 방향 (`margin-right`)   |
| `reverse` 또는 `r` | 공간 방향 반전 (`margin-left`) |

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

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

```javascript
@mixin sx($value: ()) {
  @include space($value, null);
}
```

1. 전달 받은 인자가 없을 경우, 기본 설정 값 사용
2. 전달 받은 인자가 있을 경우, 인자 값을 [space()](/scss-mixins/mixins/spacing/space.md) 믹스인에 전달 호출

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

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

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

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

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