변수를 통한 속성값 설정

element {
  --main-bg-color: brown;
}

자주 사용해야 하는 값의 경우, 변수를 선언하여 사용하는 편이 코드작성 및 유지보수 측면에서 유리하다.

위 예시와 같은 스타일로 변수를 선언하면 된다.

변수는 자식 요소에게 상속된다.

 

보통은 다음과 같이 html 태그를 의미하는 :root 선택자를 활용해 변수를 선언하여 문서 전체에서 변수에 접근 가능하도록 선언한다.

:root {
  --main-bg-color: brown;
}

이렇게 선언한 변수를 사용할 때는 var()의 괄호 안에 변수명을 전달하여 활용한다.

 

element {
  background-color: var(--main-bg-color);
}

 

만약 변수값에 연산을 가한 값을 활용하고 싶다면 calc 함수를 사용하면 된다.

element {
  margin-bottom: calc(var(--padding)/2);
}