var();을 이용한 한방에 수정하기

See the Pen var() function by nilgi (@nilgi) on CodePen.

 

:root {
  --red: #3c9066;
  --black: #fff; // root에 미리 이름과 값을 저장한다.
}
background: var(--red);
color: var(--red);
border-bottom: 5px solid var(--red);
color: var(--red);
background: var(--black);
padding: 10px;
border : 2px solid var(--red);

color: var(--red);

 

var(이름); 이렇게 쓴다. 이는 root값만 변경하면 문서의 모든 색깔을 변경할 수 있다는 뜻이다. 잘 쓰면 아주 편하다.

• var(); 재지정 하기

 

See the Pen var() 재지정 by nilgi (@nilgi) on CodePen.

 

:root {
  --red: #3c9066;
  --black: #fff;
}

h2 {
  --red: #333; // root에서 저장한 값 말고 다른 값을 사용하고 싶다면 다시 지정 해주면 된다.
  color: var(--red);
  border-bottom: 5px solid var(--red);

)