> 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/getting-started/configure.md).

# 환경 구성

## 구성 변수 <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/>" %}