[카카오테크캠퍼스 선택과정] 애플 예제: CSS 변수

코드 보기

 

CSS에서 변수를 지정할 때는 변수 맨 앞에 --를 붙여야 한다.

변수를 호출할 때는 var(변수명)의 방식을 사용한다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>
<div class="item">3</div>

.container {
  --lightgray: #f5f5f5;
  width: 400px;
  height: 400px;
  border: 2px solid orange;
  background-color: var(--lightgray);
}
.item {
  font-size: 50px;
  width: 150px;
  height: 150px;
  border: 2px solid red;
  background-color: var(--lightgray);
}

CSS에서 변수의 유효범위는 변수가 선언된 요소 자신부터 그 요소의 후손 요소까지이다.

전역적으로 사용하기 위해서 html에 변수를 선언하는 경우가 많다.