css에서 var() 쓰기

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

 

:root {
  --red: #3c9066;
  --black: #fff; / root에 미리 색을 지정
}

body {
  background: var(--red); / var(지정값) 이렇게 쓰면 된다.
}

h2 {
  color: var(--red);
  border-bottom: 5px solid var(--red); / root 값만 수정하면 모든 페이지의 색이 바뀌니 잘 쓰면 아주 편하다.
}

p {
  color: var(--red);
}

.box {
  background: var(--black);
  padding: 10px;
}

button {
  border : 2px solid var(--red);
  color: var(--red);
  padding: 10px;
}