Variable

CSS에서도 자주 반복되어 사용되는 요소들은 변수로 정해두고 사용하는 것이 편하다.
다른 프로그래밍 언어에서 처럼 변수를 어디서 정의하냐에 따라 어디서 사용할 수 있는지 영역이 정해지기도 한다.

[MDN CSS Variable] : https://developer.mozilla.org/en-US/docs/Web/CSS/--*

변수 정의하는 법

변수는 선언 및 정의된 엘리먼트 및 그의 자식 엘리먼트에서 사용할 수 있기 때문에
전역적으로 선언하려고 하면 보통 아래처럼 root에 선언한다.

:root {
 변수 선언
}

변수 선언하는 문법은 아래와 같다.
변수명에 여러 단어를 사용할 때는 - 문자로 구분자를 사용하는 것이 관례이다.

--변수-명은-이렇게: 값;

배경색 및 기본 margin을 위 문법을 이용하여 선언해보자.

:root {
 --background-color: red;
 --base-space-margin: 12px;
}

media query에서도 유용하게 사용할 수 있는데, 아래처럼 device마다 다른 기본 설정값을 사용할 수도 있다.

@media screen and (max-width: 768px) {
  :root {
    --background-color: salmon;
    --text-color: blue;
    --base-space-margin: 4px;
  }
}

변수 사용하는 법

변수는 정의된 엘리먼트 또는 그 자식에서만 사용할 수 있다.
사용할 때는 아래처럼 사용이 가능하다.

var(변수명)

아래처럼 calc() 함수를 이용해서 동적으로 셋팅해놓기도 한다.

margin-left: calc(var(--base-space-margin) * 2);