CSS 변수

사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로,

문서 전반적으로 재사용할 임의의 값을 담습니다 by mdn

 

1. CSS 변수 정의

 --변수명 : 값으로 정의하며 그 자체 만으로는 아무런 효과가 없다.

.ex {
  --color: black;
  color: white;
}

 

2. CSS 변수 접근

.ex {
  --black: #000000;
  background: var(--black);
}

 

3. CSS 변수 기본값

 변수를 정의할 때 두번째 속성값이 기본값이 된다.

.ex {
  color: var(--color, black);
}

 

4. CSS 변수 상속

<form>
  <button class="heaven">천국</button>
  <button class="hell">지옥</button>
</form>

form {
  --heaven: #ffffff;
  --hell: #000000;
}

button.heaven {
  color: var(--hell);
  background: var(--heaven);
}

button.hell {
  color: var(--heaven);
  background: var(--hell);
}

 

 

출처 : https://www.daleseo.com/css-variables/