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

# p()

패딩(Paddinig) 단축 믹스인

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

[padding()](/scss-mixins/mixins/spacing/padding.md) 믹스인을 빠르게 사용하기 위한 단축 믹스인입니다.

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

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

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

```ruby
.usage {
  @include p(l 20 r 24 y 10);
}
```

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

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

```css
.usage {
  padding-top: 10px;
  padding-right: 24px;
  padding-bottom: 10px;
  padding-left: 20px;
}
```

#### 믹스인에 설정 가능한 속성 키워드 및 값 유형

| 속성 키워드          | 값 유형                                   | 컴파일 속성                          |
| --------------- | -------------------------------------- | ------------------------------- |
| `top` 또는 `t`    | `number`, `number(unitless)`, `string` | `padding-top`                   |
| `right` 또는 `r`  | `number`, `number(unitless)`, `string` | `padding-right`                 |
| `bottom` 또는 `b` | `number`, `number(unitless)`, `string` | `padding-bottom`                |
| `left` 또는 `l`   | `number`, `number(unitless)`, `string` | `padding-left`                  |
| `x`             | `number`, `number(unitless)`, `string` | `padding-right`, `padding-left` |
| `y`             | `number`, `number(unitless)`, `string` | `padding-top`, `padding-bottom` |

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

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

```javascript
@mixin p($args: null) {
  @if not $args {
    @error 'p() 믹스인은 padding 속성의 설정 방향 top, right, bottom, left와 값을 연이어 전달 받을 수 있습니다. 뿐만 아니라 x, y 방향으로 속성을 일괄 설정 가능합니다.';
  }
  @include padding($args);
}
```

1. 전달 받은 인자가 없을 경우, 오류 메시지 출력
2. 전달 받은 인자가 있을 경우, [padding()](/scss-mixins/mixins/spacing/padding.md) 믹스인 호출

## 참고 <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)

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

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