[css] 변수

CSS 변수

css에서도 속성값을 변수로 정의해서 편하게 사용할 수 있다.

문법

<!-- 변수 정의
--const-variable: value;

// 변수 사용
속성: var(--const-variable)

위와 같이 대시,대시 두번 변수명을 사용하여 값을 정의하고 var 함수를 이용하여 변수를 사용할 수 있다.

단 특정 요소에 정의를 하게 되면 해당 요소와 자식요소에서만 변수를 사용할 수 있다. 따라서 모든 곳에서 사용하기 위해서는 root에 정의해야한다.

또한 calc 함수를 이용하면 변수의 값을 이용해서 연산이 가능하다.

사용 예시

:root {
  --background-color: thistle;
  --text-color: whitesmoke;
  --base-space: 8px;
}

.first-list {
  background-color: var(--background-color);
  color: var(--text-color);
  margine-left: var(--base-space);
}

.second-list {
  background-color: var(--background-color);
  color: var(--text-color);
  margine-left: calc(var(--base-space) * 2); // calc 함수 연산, 결과는 16px![](https://velog.velcdn.com/images%2Fyounoah%2Fpost%2Fb7ba4dc3-9c20-487d-a182-f0e74b696866%2FcssImage.png)
}

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

이렇게 미디어쿼리에서 root에 있는 변수를 다시 한번 정의해주면 사이즈가 줄어들었을 때 설정값을 바꿀수 있는 활용이 가능하다.

활용예시

/* Global */

:root {
  /* Color */
  --color-white: #ffffff;
  --color-light-white: #eeeeee;
  --color-dark-white: #bdbdbd;
  --color-pink: #fe918d;
  --color-dark-pink: #ff6863;
  --color-dark-grey: #4d4d4d;
  --color-grey: #616161;
  --color-light-grey: #7c7979;
  --color-blue: #73aace;
  --color-yellow: #fff7d1;
  --color-orange: #feb546;
  --color-black: #000000;

  /* Font size */
  --font-large: 48px;
  --font-medium: 28px;
  --font-regular: 18px;
  --font-small: 16px;
  --font-micro: 14px;

  /* Font weight */
  --weight-bold: 700;
  --weight-semi-bold: 600;
  --weight-regular: 400;
}

/* Typography */

h1 {
  font-size: var(--font-large);
  font-weight: var(--weight-bold);
  color: var(--color-black);
  margin: 16px 0px;
}

h2 {
  font-size: var(--font-medium);
  font-weight: var(--weight-semi-bold);
  color: var(--color-black);
  margin: 8px 0;
}

h3 {
  font-size: var(--font-regular);
  font-weight: var(--weight-regular);
  color: var(--color-black);
  margin: 8px 0;
}

p {
  font-size: var(--font-regular);
  font-weight: var(--weight-regular);
  color: var(--color-black);
  margin: 4px 0;
}