CSS variables

<style> .div1 { background-color : grey; color : white; margin : 20px 10px } .div2 { background-color : pink; color : white; margin : 20px 10px } </style>

css에서 이렇게 하는 것을 하드코딩으로 본다. 이렇게 코딩하기보단 변수를 지정해서 하는것이 좋다.
변수를 선언할 때는 아래와 같이 ' --변수명 : 속성' 으로 지정한다.

--somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54);

사용할 때는 var(변수); 로 아래와 같이 사용한다.

<style> .div1 { background-color: var(--somecolor); } </style>

변수를 선언할때 부모노드에서 선언했다면, 변수의 사용은 부모노드와 자식레벨에서 사용이 가능하다.
html

<div> <ul class="first"> <li>CSS variables study</li> </ul> <ul class="second"> <li>CSS variables study</li> </ul> </div>

css : first 에서 변수를 선언하면 자식레벨인 .first li 에서는 사용가능하지만 .second에서는 적용되지 않는다.

.first { --user-background-color : #ffffff; --margin-space: 16px; background-color: var(--user-background-color); margin: var(--margin-space); } .second { background-color: var(--user-background-color); margin: var(--margin-space); }

:root { --user-background-color : #ffffff; --margin-space: 16px; } .first { background-color: var(--user-background-color); margin: var(--margin-space); } .second { background-color: var(--user-background-color); margin: var(--margin-space); }

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

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

https://developer.mozilla.org/ko/docs/Web/CSS/calc()

calc() - CSS: Cascading Style Sheets | MDN