CSS 변수

✔️ 시작

css에도 변수가 존재한다. 변수를 이용해 자주 사용하는 요소를 관리할 수 있다. 즉, 재사용이 가능하다.

📍 변수

문서를 재사용할 임의의 값을 담는다. var()를 이용해 표기한다.

:root{
	--main-color: #000;
}
.bg {
	background-color: var(--main-color);
}
h2 {
	color: var(--main-color);
}

흔히 보이는 패턴은 :root의사 클래스에 선언에 재사용하는 것이다.
(꼭 :root를 사용해야하는 건 아니다.)

❗️ point

• 사용자 지정 속성의 이름은 대소문자를 구분한다.
  --main-color와 --Main-color는 다른 속성으로 인식하고 처리한다.
• 사용자 지정 속성 값을 사용할 때 일반적인 값의 자리에 var()함수를 지정 후
  매개변수는 사용자 지정 속성의 이름을 작성해 준다.(--main-color)

📍 사용자 지정 속성 대안 값

주어진 변수가 아직 정의되지 않았을 경우 var()를 이용해 여러 개의 대체 변수를 정의할 수 있다.

.box1 {
	background-color: var(--main-color, red);
    /*--main-color가 정의되지 않았을 경우 red로 표시*/
}
.box2 {
	background-color: var(--main-color, var(--sub-color, red));
    /*--main-color,-sub-color가 정의되지 않았을 경우 red로 표시*/
}
.box3 {
	background-color: var(--main-color, --sub-color, red));
    /*-sub-color, red가 유효하지 않는다*/

❗️ point

• 사용자 속성 같은 대체 구문은 쉼표로 표기한다.
  첫번째 쉼표와 마지막 사이에 있는 값들은 모두 대체 변수로 간주한다.
  (var() 내부에 2개 이상일 경우 유효하지 않는 것 같다.)

✔️ 유효하지 않은 변수를 만난 경우

:root {
	--txt-color: 16px;
}
p {
	color: red;
}
p {
	color: var(--txt-color);
}

16px는 color 속성에 유효한 값이 아니여서 적용되지 않고 기본 값이 적용된다.

✏️ 마치며

css 변수를 이용해 반복되는 속성을 관리하고 재사용할 수 있다.
변수를 이용해 라이트/다크 모드를 만들 수도 있다. 또한 범위가 큰 사이트의 경우 관리하기 유용할 것 같다.

변수에 대해서는 간단하게 알고 있어서 이번 기회를 통해 좀 더 자세히 알게 되었다.
사실 더 있는데... 이부분은 나중에 다시 수정해야겠다.

🔗 참고 사이트
https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties