CSS 변수 사용하기

 

html 어디에서나 쓸 수 있는 전역변수를 선언할 땐,

:root {
  --변수이름: 값;
}

 

:root 안에 지정하여 주면 됩니다.

변수이름을 직접 설정하여 사용하고, 변수 앞에 '--'를 붙여 사용해줍니다.

값은 css에서 사용하는 모든 값을 넣을 수 있습니다.

 

 

선언한 변수를 사용할 때,

p {
  color: var(--변수이름); 
}

지정한 변수이름을 var() 안에 넣어주면 됩니다.

 

 

 

예를 들어 메인 컬러를 지정하여 모든 곳에서 사용하고 싶을 때,

:root {
  --main-color: #eee;
}

.text {
  color: var(--main-color);
}

:root 의사 클래스에 전역변수를 지정하여 사용합니다.

 

 

 

css 변수는 대소문자를 구분하기 때문에 주의하셔야 합니다.

:root {
  --main-color: blue;
  --Main-color: red;
}

.text {
  color: var(--main-color); /* 폰트 색상 blue */
  background-color: var(--Main-color); /* 배경 색상 red */
}

--main-color, --Main-color는 다른 변수로 인식 됩니다.

 

 

 

만약 변수가 선언되지 않은 채 사용되었을 경우를 대비해 대체 값을 넣어야 할 땐,

.text {
  color: var(--main-color, gray);  /* --main-color가 정의되지 않았을 때 gray로 표시 */
}

.button {
  color: var(--main-color, var(--Main-color, orange)); /* --main-color, --Main-color 둘 다 정의되지 않았을 때 orange로 표시 */
}

.bg {
  color: var(--main-color, pink, purple); /* 대체 값은 1개만 가능, 2개 이상은 불가 */
}

var()안에 변수이름과, 대체 값을 넣어주면 됩니다.

만일 유효하지 않은 변수값이 선언되었을 때, 대체 값이 없다면 초기값이나 상속된 값이 반영됩니다.

 

 

 

전역변수가 아닌 지역변수로 사용하고 싶을 땐 원하는 엘리먼트 안에서 지정하여 사용해주면 됩니다.

 

 

메인 키컬러나, 타이틀 폰트 사이즈 등 같은 값이 반복 될 때

변수를 지정하여 사용하면 나중에 수정사항이 생겼을 때 변수 안의 값만 변경하면 

변수가 지정된 모든 값이 변경 되기 때문에 편리하게 사용할 수 있습니다.