css에서 색상값을 변수로 지정하기

색상값.. #fffff 뭐 이런식으로 되어있거나 rgb로 되어있거나 외우기 힘든건 똑같다..

어처피 자주 사용할 색상값이면 이름을 붙여주고 그 이름만 쓰면 얼마나 편한가?

게다가 이렇게 하면 나중에 컬러 조합을 바꾸고싶을때 그 변수이름에 해당하는 색상값만 살짝 바꿔주면 된다.

짱편함

---

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

:root {
  --maincolor : #f29191;
}

css파일에서 이렇게 지정한다

2. 활용하기

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

var(--maincolor)

(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);
`