CSS 변수(variables)

Dev/CSS

takeU 2021. 7. 5. 15:54

SASS로는 변수를 사용해 본 적이 있는데,

CSS에서는 직접적으로 사용해 본 기억이 없어서 찾아보고 포스팅 해보려 함

자바스크립트에서는 변수를 선언할 때 ES5는 var, ES6는 let, const를 사용하는데

CSS 변수를 자바스크립트와 비교해보면 const와 비슷한 역할을 한다고 보면 된다.

굳이 한번 정한 변수의 값을 바꿀 일이 없기 때문.

예시를 통해 이해해보면,

페이지 전역에서 가져다 쓸 수 있는 #FFC600이란 색상값을 base 라는 이름으로 변수화 하고 싶다면 아래와 같이 작성하면 된다.

:root {
    --base: #FFC600;
}

:root는 HTML 요소 중 가장 상위 요소에 적용한다는 뜻이고,

--base는 base라는 CSS 변수를 생성한다는 뜻이다.

위와같이 :root에 변수를 선언하는 것은 전역변수를 생성한다는 뜻이다.

선언한 CSS 변수를 호출하기 위해서는 다음과 같이 쓴다

.h1 {
    color: var(--base);
}

위와같이 선언한 변수를 가져올때는 var(--변수명)로 호출하면 된다.

요즘은 CSS를 그냥 쓰는 경우보다는,

SASS와 같은 CSS 전처리기를 사용해 보다 효율적으로 코드를 작성 할 수 있다.

takeU