> 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/css-grid/grid-item/grid-col/col-start.md).

# col-start()

grid-column-start 속성 믹스인

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

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

{% hint style="info" %}
col-start() 믹스인은 [grid-col()](/scss-mixins/mixins/css-grid/grid-item/grid-col.md) 믹스인 내부에서 활용되는 모듈입니다.
{% endhint %}

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

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

> col-start($valu&#x65;**:\[number, string]**)

```javascript
.usage {
  @include col-start(auto);
}
```

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

위 코드는 다음의 CSS 코드로 출력됩니다.

```css
.usage {
  grid-column-start: auto;
}
```

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

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

```javascript
@mixin col-start($value: null) {
  @if type-of($value) != 'number' and $value != 'auto' {
    @error 'col-start() 믹스인은 숫자 또는 auto 문자 값만 전달 받을 수 있습니다.';
  }
  grid-column-start: $value;
}
```

1. 전달 받은 인자 값을 분석하여 유효하지 않을 경우 오류 메시지 출력
2. 유효한 경우 `grid-column-start` 값으로 설정

## 참고 <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)
* [@error](https://sass-lang.com/documentation/at-rules/error)
* [type-of()](https://sass-lang.com/documentation/modules/meta#type-of)