CSS 심화 - 변수

css에서도 변수를 선언하고 값을 할당할 수 있다.
선언은 --접두사를 붙여 선언하고 값을 사용할 때는 var() 내부에 변수를 작성한다.

<div class="box primary"></div>
<div class="box danger"></div>
<div class="box success"></div>

:root {
  --color-primary: royalblue;
  --color-danger: red;
  --color-success: yellowgreen;
} /* 전역 변수 선언 */
.box {
  width: 200px;
  height: 70px;
  border: 4px solid;
}
.primary {
  background-color: var(--color-primary);  /* 값에 변수를 적용 */
}
.danger {
  background-color: var(--color-danger); /* 값에 변수를 적용 */
}
.success {
  background-color: var(--color-success); /* 값에 변수를 적용 */
}

:root는 최상위 요소를 선택하는 가상 클래스 선택자이다.
html 태그 선택자와 동일하지만 태그 선택자는 명시도가 1점, 가상 클래스 선택자는 명시도가 10점이기 때문에 안전하게 사용하려면 가상 클래스 선택자를 사용하는 것이 좋다.

변수가 선언이 되면 해당 요소에 종속이 되고 하위 요소에 상속이 된다.
따라서 하위 요소에도 변수를 사용할 수 있다.

<div class="box primary"></div>
<div class="box danger"></div>
<div class="box success"></div>
<div class="container">
  <div class="item"></div>
</div>
<div class="list">
  <div class="item"></div>
</div>

:root {
  --color-primary: royalblue;
  --color-danger: red;
  --color-success: yellowgreen;
} /* 전역 변수 선언 */
.box {
  width: 200px;
  height: 70px;
  border: 4px solid;
}
.primary {
  background-color: var(--color-primary);  /* 값에 변수를 적용 */
}
.danger {
  --color-danger: hotpink; /* 재할당 */
  background-color: var(--color-danger); /* .danger의 하위 요소는 hotpink로 적용 */
}
.success {
  background-color: var(--color-danger); /* 형제 요소는 재할당에 영향을 받지 않음 */
}
.container {
  --color-container: brown; /* .container 내부에서 변수 선언 */
}

.item {
  width: 100px;
  height: 100px;
  border: 4px solid;
  background-color: var(--color-container); /* .container 내부의 .item만 색상 적용 */
}

만약 해당하는 변수가 없을 시 var 함수의 두 번째 인수로 초깃값을 지정할 수 있다.
SCSS의 !default와 같다.

:root {
  --color-primary: royalblue;
  --color-danger: red;
} /* 전역 변수 선언 */

.success {
  background-color: var(--color-success, orange); /* 초깃값 설정, 값이 존재하지 않으면 orange로 적용 */
}