CSS에서의 변수 선언💡

---

💛변수의 선언

✅ 아래와 같이 더블대쉬(--)와 함께 변수명을 지정하여 선언한다.

	html {
      --변수명 : 속성값;

      --primary-color: #F70A8D;
      --point-color: #F9C23C;
      --title-font: 42px;
      --box-size: 120px
    }

💛변수의 사용

✅ 사용하고 싶은 속성의 값으로 var(--변수명)을 호출한다

  div {
     속성: var(--변수명);

     color: var(--point-color);
     background-color: var(--primary-color);
   }

✅ 한번 선언 된 변수는 몇번이든 재사용이 가능하다

	div {
      color: var(--point-color);
      background-color: var(--point-color);
      border-color: var(--point-color);
    }

✅ 숫자타입의 변수는 calc()함수내에서 계산이 가능하다

	div {
      width: val(--box-size);
      height: calc( val(--box-size) * 2 );
    }

💛변수의 유효범위

✅ 변수의 유효범위는 자신을 포함한 자신의 후손요소이다.
     하위요소에서 선언한 변수는 상위요소에서 사용할 수 없다.

	.parent {
    	/* 자식요소에서 선언한 변수는 부모요소에서 적용되지않는다 */
    	font-size: var(--default-size); /* 적용되지않음 */
    }
    
    .parent .child {
    	/* 자식요소인 .child 내에서 변수 선언 */
    	--default-size: 18px;
    }

✅ 가능한 변수를 선언할 때는 최상위 요소인 :root ( = html )에서 선언한다.

	:root {
      --primary-color: #F70A8D;
      --point-color: #F9C23C;
      --title-font: 42px;
    }

---

마치며🙌

scss에서는 종종 반복되는 속성에 대해서 변수를 선언하고 사용해봤었지만
css에서도 변수사용이 가능하다는 사실은 또 몰랐었던 나...
평소엔 scss사용을 더 선호하지만 css를 사용 할 일이 생겼을 때 유용하게 쓰일 수 있겠다!