# 환경 구성

## 구성 변수 <a href="#variables" id="variables"></a>

`@euid/scss-mixins` 패키지의 [\_config.scss](https://github.com/yamoo9/scss-mixins/blob/main/_config.scss)  파일에는 패키지의 유틸리티 함수, 믹스인의 설정을 변경할 수 있는 변수를 제공합니다. 필요한 경우, 사용자는 각 변수 값을 설정 조정해 사용할 수 있습니다.

### 단위 설정 <a href="#units" id="units"></a>

`em` , `rem` 값의 기준이 되는 기본 값을 조정해 사용할 수 있습니다. (기본 값: `16px`)

```css
$base-em-size: 16px;
$base-rem-size: 16px;
```

{% hint style="info" %}
설정된 단위 값은 [em()](/scss-mixins/utilities/units/em.md), [rem()](/scss-mixins/utilities/units/rem.md) 함수의 기본 단위 값으로 사용됩니다.

```css
@debug em(16px); // → 1em 반환
@debug rem(16px); // → 1rem 반환
```

{% endhint %}

### 컬러 설정

컬러 스킴(Color Scheme, 색 구성표)을 `컬러-이름: 값` 형태로 추가해 활용할 수 있습니다.

```css
$colors: (
  red: #e50914,
  vivid-red: #ff000d,
  blue: #0071eb,
  black: #010101,
  darkGray: #303030,
  gray: #757575,
  lightGray: #b5b5b5,
  white: #ffffff,

  state-normal: #707070,
  state-hover: #35a1af,
  state-focus: #1870d4,
  state-active: #185158,
  state-disabled: #dedede,
  state-valid: #219c5e,
  state-invalid: #e72e6c,
);
```

{% hint style="info" %}
컬러 스킴에 등록된 컬러 값은 [getColor()](/scss-mixins/utilities/colors/get-color.md) 함수를 사용해 추출할 수 있습니다.

```css
@debug getColor(red); // → #e50914 반환
```

{% endhint %}

### &#x20;박스 정렬 설정 <a href="#box-alignment" id="box-alignment"></a>

*`justify-*`, `align-*`* 대신, `place-*` 속성 사용하고자 할 경우 `true` 값을 설정합니다.

```css
$using-place-layout: false;
```

{% hint style="info" %}
[place-items](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items), [place-content](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content), [place-self](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) 속성은 justify-items, align-items와 같이 CSS Grid, Flexbox 레이아웃에서 사용되는 박스 정렬 속성을 단축해 사용할 수 있는 속기형 속성입니다.

* **place-items** = [justify-items](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) + [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
* **place-content** = [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) + [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
* **place-self** = [justify-self](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) + [align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
  {% endhint %}

### 커스텀 이징 설정 <a href="#custom-easings" id="custom-easings"></a>

[ease()](/scss-mixins/utilities/easing/ease.md) 유틸리티 함수에서 사용 할 수 있는 커스텀 이징 키워드, 이징 함수를 등록 설정합니다. ([ease-merge()](/scss-mixins/utilities/easing/ease-merge.md) 활용)

```css
$easings: ease-merge(
  (
    'in-euid': cubic-bezier(0.43, 0.16, 0.7, 0.52),
    'out-euid': cubic-bezier(0.31, 0.16, 0.56, 0.99),
    'inout-euid': cubic-bezier(0.94, 0.01, 0.47, 1.13),
  )
);
```

### 중단점 설정 <a href="#breakpoints" id="breakpoints"></a>

반응형 웹 디자인의 중단점(breakpoints)으로 사용할 키워드와 값을 임의로 추가 설정할 수 있습니다. ([API 참고](https://eduardoboucas.github.io/include-media/documentation/#variable-breakpoints))

```css
$breakpoints: (
  'sm': em(640),
  'md': em(768),
  'lg': em(1024),
  'xl': em(1280),
  '2xl': em(1440),
  '3xl': em(1920),
);
```

{% hint style="info" %}
[em()](/scss-mixins/utilities/units/em.md) 함수를 사용하면 px 수치 값을 손쉽게 em 단위(16px 기준)로 변경할 수 있습니다. 등록된 중단점 키워드는 아래와 같이 [media()](/scss-mixins/mixins/responsive-web/media.md) 믹스인에서 사용할 수 있습니다.

```css
@include media('>=md', '<lg') {
  // ...
}
```

등록된 키워드는 다음과 같이 CSS 코드로 컴파일 됩니다. (단위는 em으로 설정 됨)

```css
@media (min-width: 48em) and (max-width: 63.99em) {
  // ...
}
```

{% endhint %}

### 미디어 표현식 설정 <a href="#media-expressions" id="media-expressions"></a>

[미디어 쿼리(media-quries)](https://mzl.la/2KMpm5o)를 손쉽게 사용하기 위한 키워드와 값을 임의로 추가 설정할 수 있습니다. ([API 참고](https://eduardoboucas.github.io/include-media/documentation/#variable-media-expressions))

```css
$media-expressions: (
  'landscape': '(orientation: landscape)',
  'portrait': '(orientation: portrait)',
  '2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
  '3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)',
  'dark-mode': '(prefers-color-scheme: dark)',
  'no-motion': '(prefers-reduced-motion: reduce)',
);
```

{% hint style="info" %}
등록된 미디어 쿼리 표현식 키워드는 아래와 같이 [media()](/scss-mixins/mixins/responsive-web/media.md) 믹스인에서 사용할 수 있습니다.

```css
@include media('no-motion') {
  // ...
}
```

사용된 키워드는 표준 CSS 미디어 쿼리로 컴파일 됩니다.

```css
@media (prefers-reduced-motion: reduce) {
  // ...
}
```

{% endhint %}

### 미디어 쿼리 사용 설정 <a href="#using-media-quries" id="using-media-quries"></a>

미디어 쿼리를 사용한 코드를 컴파일 하고 싶지 않을 경우 `false` 값을 설정할 수 있습니다. ([API 참고](https://eduardoboucas.github.io/include-media/documentation/#variable-im-media-support))

```css
$im-media-support: false;
```

{% hint style="warning" %}
해당 설정은 **미디워 쿼리를 지원하지 않는 별도의 브라우저를 위한 스타일 시트를 만들 때 사용**합니다.
{% endhint %}

### 에뮬레이트 중단점 설정 <a href="#emulate-breakpoints" id="emulate-breakpoints"></a>

미디어 쿼리 지원이 비활성화 된 경우, 에뮬레이트 할 중단점을 설정합니다. ([API 참고](https://eduardoboucas.github.io/include-media/documentation/#variable-im-no-media-breakpoint))

```css
$im-no-media-breakpoint: 'xl';
```

{% hint style="info" %}
"미디어 퀴리를 사용하지 않음"으로 설정하면 모든 미디어 쿼리 구문이 컴파일되지 않습니다.

```css
$im-media-support: false;
```

하지만 특정 중단점에 해당되는 코드는 남기고 싶을 수 있습니다. 이런 경우 에뮬레이트 중단점을 설정합니다.

```css
$im-no-media-breakpoint: 'xl';
```

에뮬레이트 중단점 보다 큰 스크린 너비의 미디어 쿼리 문은 코드를 컴파일 하지 않습니다.

```css
@include media('>xl') {
  // ...
}
```

하지만 에뮬레이트 중단점을 포함한 작은 너비의 미디어 쿼리문은 코드를 컴파일 합니다. 단, @media 구문이 생성되는 것이 아니라, 컴파일 된 코드가 병합됩니다. (즉, 코드가 추가될 뿐입니다)

```css
@include media('>=xl') {
  // ...
}
```

{% endhint %}

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

[@euid/scss-mixins](https://www.npmjs.com/package/@euid/scss-mixins) 패키지는 내부적으로 include-media 믹스인 라이브러리를 활용합니다.

{% embed url="<https://eduardoboucas.github.io/include-media/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/scss-mixins/getting-started/configure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.