환경 구성

@euid/scss-mixins 라이브러리를 구성하는 환경 변수

구성 변수

@euid/scss-mixins 패키지의 _config.scss 파일에는 패키지의 유틸리티 함수, 믹스인의 설정을 변경할 수 있는 변수를 제공합니다. 필요한 경우, 사용자는 각 변수 값을 설정 조정해 사용할 수 있습니다.

단위 설정

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

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

설정된 단위 값은 em(), rem() 함수의 기본 단위 값으로 사용됩니다.

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

컬러 설정

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

$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,
);

컬러 스킴에 등록된 컬러 값은 getColor() 함수를 사용해 추출할 수 있습니다.

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

박스 정렬 설정

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

$using-place-layout: false;

place-items, place-content, place-self 속성은 justify-items, align-items와 같이 CSS Grid, Flexbox 레이아웃에서 사용되는 박스 정렬 속성을 단축해 사용할 수 있는 속기형 속성입니다.

• place-items = justify-items + align-items

• place-content = justify-content + align-content

• place-self = justify-self + align-self

커스텀 이징 설정

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

$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),
  )
);

중단점 설정

반응형 웹 디자인의 중단점(breakpoints)으로 사용할 키워드와 값을 임의로 추가 설정할 수 있습니다. (API 참고)

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

em() 함수를 사용하면 px 수치 값을 손쉽게 em 단위(16px 기준)로 변경할 수 있습니다. 등록된 중단점 키워드는 아래와 같이 media() 믹스인에서 사용할 수 있습니다.

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

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

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

미디어 표현식 설정

미디어 쿼리(media-quries)를 손쉽게 사용하기 위한 키워드와 값을 임의로 추가 설정할 수 있습니다. (API 참고)

$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)',
);

등록된 미디어 쿼리 표현식 키워드는 아래와 같이 media() 믹스인에서 사용할 수 있습니다.

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

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

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

미디어 쿼리 사용 설정

미디어 쿼리를 사용한 코드를 컴파일 하고 싶지 않을 경우 false 값을 설정할 수 있습니다. (API 참고)

$im-media-support: false;

해당 설정은 미디워 쿼리를 지원하지 않는 별도의 브라우저를 위한 스타일 시트를 만들 때 사용합니다.

에뮬레이트 중단점 설정

미디어 쿼리 지원이 비활성화 된 경우, 에뮬레이트 할 중단점을 설정합니다. (API 참고)

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

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

$im-media-support: false;

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

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

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

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

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

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

참고

@euid/scss-mixins 패키지는 내부적으로 include-media 믹스인 라이브러리를 활용합니다.

include-media: Simple, elegant and maintainable media queries in Sasseduardoboucas.github.io