# sticky()

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

스티키 위치(sticky position) 레이아웃을 위한 개별 속성을 빠르게 설정할 때 사용하는 믹스인입니다.

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

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

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

```ruby
.usage {
  @include sticky(t 100 z 1700);
}
```

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

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

```css
.usage {
  position: sticky;
  z-index: 1700;
  top: 100px;
}
```

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

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

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

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

```javascript
@mixin sticky($args: null) {
  @include position(sticky, $args);
}
```

1. 스티키(`sticky`) 위치 설정
2. 전달 받은 인자 `$args`가 있을 경우, 리스트 분석 후 개별 속성 설정

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

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

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

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

* [position()](https://yamoo9.gitbook.io/scss-mixins/mixins/position/position)