[CSS] Custom properties (사용자 정의 속성)

developer.mozilla.org/en-US/docs/Web/CSS/--*

Custom properties (--*): CSS variables - CSS: Cascading Style Sheets | MDN

wit.nts-corp.com/2017/06/27/4731

CSS Custom Properties 알아보기 | WIT블로그

 

- Custom properties : 사용자가 정의한 속성의 집합

​

- Formal Syntax

 

<declaration-value>

:root { --var-name: value; }

custom properties를 사용하게 되면 개발과 리팩토링이 정말 간단해진다.

또한, 미디어 쿼리할 때도 유용하다! 적어놓은 코드를 복붙하고 원하는 부분만 수정하면 된다.

​

:root{
  --background-color: blue;
  --text-color: white;
  --base-space: 8px;
}

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

.second-list{
  background-color: var(--background-color);
  color: var(--text-color);
  margin-left: calc(var(--base-space) * 2); //root의 base-space의 두배를 margin-left의 값으로
}

@media screen and (max-width: 768px){
  :root{ //그대로 복사 붙여넣기하고 속성값만 바꾸어주면 끝!
    --background-color: red;
    --text-color: white;
    --base-space: 16px;
}