색상값을 변수로 지정하기

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

문서 전반적으로 재사용할 임의의 값을 변수에 담아줍니다. (대부분 색상에 제일 많이 사용하는 듯)

 

1. 색상값 변수로 지정하기

color: var(--main-color);

:root {
  --main-color: #000000
}

: root 최상위 element = html 태그 = 가상 선택자

:root를 이용하는 이유 가상선택자는 클래스명으로 분류, html태그는 태그명으로 분류됨 => 태그 이름보다 우선순위가 높기 때문입니다.

2. 활용하기

이제 각 색상들을 아래 변수 이름으로 사용할 수 있다.

(1) css에서 활용

body {
  background-color: var(--maincolor);
}

(2) JavaScript / html 에서 활용

<a style={{color:"var(--maincolor)"}}>Move to Profile</a>
const Card = styled.div`
    background-color : var(--maincolor);