CSS에서 변수 사용하기

참조 : https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

IE에서는 지원하지 않습니다. 

Can I use 검색결과

지원이 가능하도록 도와주는css-var-ponyfill이라는 라이브러리가 있긴한데,

아무리 설정해도 해결책을 못 찾았습니다. 

좀 더 파보고 해결책이 나오면 추후 포스팅하도록 하겠습니다.

 

element와 root에서 선언함으로써 스코프(scope)를 지정할 수 있습니다. 

element에서 지정된 변수는 해당 element가 부모가 아니면 적용이 되지 않습니다. 

:root {
    --box-size: 50px;
}

.box1 {
    --main-color: orange;
}

:root는 전역을 뜻하고. box1 은. box1을 포함한 하위 element 에게만 적용됩니다.

 

여기 테스트를 하기 위한 마크업이  있습니다. 

<div class="wrap">
    <div class="box box1"><div class="inner">box1</div></div>
    <div class="box"><div class="inner">box2</div></div>
    <div class="box"><div class="inner">box3</div></div>
</div> 

wrap안에 box들을 float 하고 wrap의 width값을 box 사이즈 * 3 만큼 주려고 합니다. 

변수를 사용하지 않는 CSS라면 다음과 같이 줬을 겁니다. 

.wrap {
    overflow :hidden;
    width: calc(50px * 3);
    background: red;
}

.box {
    float: left;
    background: green;
    width: 50px;
    height: 50px; 
    color: yellow; 
}

이렇게 작성하면 결과는 같아서 문제가 없어 보이지만, 

만약 box의 사이즈가 45px로 줄어들기라도 한다면 50px이라고 선언된 부분을 모두 찾아 수정해야 합니다. 

하지만 변수를 사용하면 변수를 준 부분만 수정하면 되겠죠?

 

다음은 변수가 적용된 소스입니다. 

선언된 변수를 사용하려면 var(변수명) 이렇게 사용하면 됩니다. 

:root {
    --box-size: 50px;
}

.wrap {
    overflow :hidden;
    width: calc(var(--box-size) * 3);
    background: red;
}

.box {
    float: left;
    background: green;
    width: var(--box-size);
    height: var(--box-size); 
    color: yellow; 
}

 

요즘은 Sass와 같은 전처리기를 사용한다거나, SPA개발로는 css도 스크립트로 작성하니 그다지 필요성은 없어 보이지만,

css에서도 변수를 활용할 수 있다는 것이 흥미로웠습니다. 

옛날에 하던 프로젝트 중  slider를 css만으로 직접 구현할 때 사용했었던 기억이 나기도 합니다.