CSS 덮어쓰기 변수

전역 변수를 지역 변수로 덮어쓰기

이전 페이지에서 전역 변수는 전체 문서에서 접근/사용할 수 있지만, 지역 변수는 선언된 선택자 내에서만 사용할 수 있습니다.

이전 페이지의 예를 보세요:

실례

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

직접 시도해 보세요

때로는 변수가 페이지의 특정 부분에서만 변경되기를 원할 때가 있습니다.

버튼 요소가 다른 파란색을 사용하려면, button 선택자 내에서 --blue 변수를 다시 선언할 수 있습니다. 이 선택자에서 var(--blue)를 사용할 때, 여기서 선언된 지역 --blue 변수 값이 사용됩니다.

지역의 --blue 변수가 button 요소의 전역 --blue 변수를 덮어줍니다:

실례

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

직접 시도해 보세요

새로운 지역 변수 추가

만약 한 곳에서만 변수를 사용할 경우, 새로운 지역 변수를 선언할 수도 있습니다. 예를 들어:

실례

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

직접 시도해 보세요

브라우저 지원

표에 나타난 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

함수
var() 49.0 15.0 31.0 9.1 36.0

CSS var() 함수

함수 설명
var() CSS 변수의 값을 삽입하세요。