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;
}
때때로 우리는 페이지의 특정 섹션에서만 변수가 변경되기를 원합니다.
버튼 요소에 대해 다른 색상의 파란색을 원한다고 가정합니다. 그런 다음 버튼 선택기 내부에 --blue 변수를 다시 선언할 수 있습니다. 이 선택기 내부에서 var(--blue)를 사용하면 여기에 선언된 로컬 --blue 변수 값이 사용됩니다.
지역 --blue 변수가 버튼 요소에 대한 전역 --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; /* local variable will
override global */
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; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}
브라우저 지원
표의 숫자는
var()
기능을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 함수
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |