css var()

css에서 변수를 이용 하고 싶었던 때가 있었을 것이다.

위의 코드는 css에서 변수를 정의하고, 해당 변수를 사용 해보는 간단한 예제이다.

간단하게 내용을 뜯어보면

:root { --text-color: red; } // --text-color 변수에 red라는 값을 할당.

.title { --text-color: green; } // 클래스가 title인 경우 --text-color 변수에 green라는 값을 할당.

* { color: var(--text-color); } // 모든 태크에서 색상을 변수에서 색상을 가져오게 변경.

Title

안녕하세요

 그리하여 위처럼 title클래스를 가지고 있는 녀석은 녹색으로 일반 태그는 빨간색으로 보이게 된다.

조금더 꼬아보자.

위처럼 transform 처럼 여러속성을 정의할 수 있는 css속성에서는 변수 사용에 있어서 더더욱 절실하게 된다.

css를 뜯어보자.

.btn { transform: scale(var(--big, 1)) skew(var(--skew, 0deg)) } // scale을 --big변수를 참조하되, 정의 되어있지 않으면 1을 이용하게하고, skew를 --skew 변수를 참조 하되, 정의 되있지 않아면 0deg를 쓰게 하였다.

.big { --big: 1.5; } // --big 변수에 1.5라는 값을 할당.

.skew { --skew: 30deg; } // --skew 변수에 30deg라는 값을 할당.

위와 같이 정의 하여 4가지 경우를 각각 원하는 방식으로 정의를 할 수 있었는데, 만약에 변수를 사용 하지 않았다면, 

.big { transform: scale(1.5) }

.skew { transform: skew(30deg) }

.big.skew { transform: scale(1.5) skew(30deg) }

위와 같이 조합 되는 css가지수에 따라 전부 정의해야 할 수도 있다. 종류가 많아지면 많아질수록 지옥이 될지도...