환경 구성
@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;
커스텀 이징 설정
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 믹스인 라이브러리를 활용합니다.
