CSS 변수

CSS 변수는 한동안 사용되어 왔으며 CSS에서 중복을 줄이기 위해 설계되었습니다. 동시에 여러 값을 변경하는 데 유용한 방법입니다. 그것들을 만들려면 -- 접두사를 사용하고 var() 함수를 사용하여 선언에서 사용할 수 있습니다.

:root { 
  --header-background-colour: red; 
  --secondary-background-colour: blue; 
  --text-colour: white; 
} 

header { 
  background-color: var(--header-background-colour); 
  color: var(--text-colour); 
} 

p { 
  background-color: var(--secondary-background-colour); 
  color: var(--text-colour); 
} 

이들은 대소문자를 구분하므로 --bg-colour 및 --BG-colour는 두 개의 개별 속성으로 간주됩니다. 현재 지원을 보려면 caniuse.com 최신 브라우저에 좋은 지원이 있지만 모든 사람이 좋아하는 IE를 지원해야 하는 경우 작동하지 않고 대신 var를 사용하기 전에 별도의 배경 속성을 설정해야 합니다.

  background-color: red; // this will work in IE 
  background-color: var(--header-background-color); // this will not

계승

다른 CSS 속성과 마찬가지로 변수는 상속되므로 위에 표시된 대로 변수를 :root에 설정하여 전역적으로 사용 가능하고 모든 요소에 액세스할 수 있도록 하는 것이 좋습니다. 그런 다음 특정 개별 요소를 설정하여 이러한 전역 값을 덮어쓸 수 있습니다.

codepen에서 간단한 예를 설정했습니다.

CSS Variables에서 Chloe(@cgweb)의 PenCodePen을 참조하십시오.