css를 통한 커스텀 속성 변수 사용은 ie11은 폴리필로 지원하고 있습니다.
ie가 타락하고 있는 이 시점에 상기시켜두면 좋지 않을까 싶어서 포스팅 합니다.
프로젝트의 전역 설정에 사용자 정의 속성 (CSS 변수라고도 함)을 사용하는 방법에 대한 몇 가지가 있습니다.
Sass를 사용하면 매우 쉽습니다.
// Global option
$enable-shadows: false;
// Mixin that consumes the shadow
@mixin box-shadow($shadow...) {
@if $enable-shadows {
box-shadow: $shadow;
}
}
// Put it to use
.component {
@include box-shadow(0 .5rem 1rem rgba(0,0,0,.1));
}
이제 기본적으로 $enable-shadows를 true로 변경하지 않는 한 box-shadows는 컴파일된 CSS에 포함되지 않습니다.
하지만 사용자 지정 속성으로 이 작업을 수행하는 것은 생각만큼 어렵지 않습니다.
사용자 지정 속성의 경우 대체값 덕분에 논리가 매우 유사합니다.
전역 --enable-shadows 옵션이있는 경우 대체 값보다 우선합니다.
.component의 box-shadow를 활성화하려면 주석 처리하거나 --enable-shadows를 제거하십시오.
// Global option
:root {
--enable-shadows: none;
}
// Put it to use
.component {
box-shadow: var(--enable-shadows, 0 .5rem 1rem rgba(0,0,0,.1));
}
또한 다른 클래스를 할당하여 사용할 수도 있습니다.
// Global option
:root {
--component-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}
// Put it to use
.component {
box-shadow: var(--component-shadow);
}
.remove-shadow {
// 이 클래스를 사용하면 box-shadow를 적용하지 않을 수 있습니다.
--component-shadow: none;
}
이를 통해 전처리기없이 CSS의 전역 옵션을 몇 가지 기본적으로 제어 할 수 있습니다.
출처 : markdotto.com/2020/05/20/global-css-options-custom-properties/
'CSS' 카테고리의 다른 글
키프레임 에니메이션을 지연시키는 새로운 방법 (0) | 2020.10.18 |
---|---|
clamp() 사용하기 (0) | 2020.10.11 |
height 100vh ios 이슈 해결방법 -webkit-fill-available (0) | 2020.09.20 |
Css에서 line-height를 조정하는 방법 (0) | 2020.09.20 |
[Modern CSS] 동일한 높이 만들기 Flex vs Grid (0) | 2020.09.13 |
댓글