CSS에서 변수 사용하기

Sass없이도 변수를 사용할 수 있다는 것을 알게 되어 그 방법에 대해서 적어봅니다.

 

변수 정의

간단합니다.

하이픈(-) 두개를 적어주고 그 옆에는 변수명(white): 할당하고싶은값(#fff)을 적어주면 됩니다.

:root {
  --white: #fff
}

여기서 :root라는 것은 전역 변수입니다.

전역변수란 선언함으로써 모든 곳에서 사용할 수 있는 변수를 의미합니다.

변수로 색상 말고도 다른 값들도 지정할 수 있습니다.

 

:root {
    --main-color: #2980b9;
    --red: red;
    --light-color: #777;
    --light-bg: #eee;
    --black: #2c3e50;
    --white: #fff;
    --box-shadow: 0 0.5rem 1rem reba(0,0,0,0.1);
    --border:.1rem solid rgba(0,0,0.3);
}

 

정의한 변수 사용

위에서 정의한 변수를 사용하기 위해서는

var(--변수명)

으로 사용할 수 있다.

 

.selector { background-color: var(--white); }

이렇게  사용하면 

--white가 위에서 정의한 #fff의 색상값이

background-color에 대입되어 배경색이 #fff이 되는 것이다.