📌 어떤 코딩이든지 hard coding의 습관은 좋지 않다. CSS 역시 마찬가지!

변수에 담아 사용하는 것이 유지보수 측면에서 훨씬 유용한다.

✏활용방법

🚩 정의

--변수이름 : 속성;

--font-size: 32px;

🚩 선언

속성: var(--변수이름);

font-size: var(--font-size);

📌 정의한 변수는 모든 자식노드에서 활용이 가능하다. 형제노드❌\

📌 지역적으로 변수를 쓰기보다는 “최상위 부모노드(root)” 에서 정의한다.

→ root에 변수를 정의해 두면, 어떤 요소들에서도 접근이 가능하게 된다.

📌 보통은 공통적인 부분이나 기본 테마 컬러 등을 root에 변수를 선언해두고 사용한다.

✏ 응용

:root {
	--base-space: 8px;
}

.first-list {
	margin-left: var(--base-space); // 8px
}
.second-list {
	margin-left: calc(var(--base-space) + 40px); // 48px
}
.third-list {
	margin-left: calc(var(--base-space) * 2); // 18px
}

💥✏ 응용2

@media screen and (max-width: 768px) {
        :root {
          --font-size: 20px;
          --background-color: tomato;
          --text-color: dodgerblue;
          --base-space: 1px;
        }

미디어쿼리 적용시, 모든 적용 대상을 일일이 적지 않고, root에 선언한 변수 값만 바꿔주면 된다.

✏ 응용3

color: var(--text-color, whitesmoke);

앞서 변수의 정의가 되어있지 않는 경우에는, var(변수이름, 변경값)을 설정 할 수 있다.