환경 구성

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

구성 변수

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

단위 설정

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

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

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

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

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

박스 정렬 설정

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

$using-place-layout: false;

커스텀 이징 설정

$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: (
  'sm': em(640),
  'md': em(768),
  'lg': em(1024),
  'xl': em(1280),
  '2xl': em(1440),
  '3xl': em(1920),
);

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

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

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

미디어 표현식 설정

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

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

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

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

미디어 쿼리 사용 설정

$im-media-support: false;

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

에뮬레이트 중단점 설정

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

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

$im-media-support: false;

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

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

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

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

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

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

참고

Previous시작하기 Next변경 이력

Last updated 4 years ago

Was this helpful?