사용자 정의 속성 사용 custom properties (Global CSS )

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/