[CSS] CSS에서 변수 사용하기

CSS, SCSS를 사용할 때 color 값 지정은 굉장히 많이 발생한다. 자주 쓰이는 색깔들은 표준적으로 정해져 있기도 하지만, 투명도를 조절하거나 정해져 있지 않는 경우에는 아래와 같이 hex값(#ffffff 등)이나 RGBA(rgba(255,255,255,0.5) 등)를 사용하여 지정한다.

.element {
    color: #ffffff;
}

예시로 든 것은 그냥 흰색이지만, 만약 키워드가 없는 색상을 굉장히 많이 지정해야 한다면? 프로그래밍을 맨 처음 배울 때의 변수의 필요성과 같이, 반복 및 유지보수 용이성을 위해서는 색상을 키워드로 하는 것이 좋을 것이다.

vuetify와 같은 UI 프레임워크를 사용한다면, 이전에 vuetify에서 색상 지정하는 글에서 썼던 것처럼 color를 지정하고, class="primary"와 같이 사용할 수도 있다. 하지만, 이것으로는 color를 css에서 지정할 수도 없고, 세심한 조절이 어렵다.

다행히(?)도 굉장히 오래, 널리 쓰이는 CSS인 만큼 변수를 지정하는 방법은 이미 있다.

공식 문서 : developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

.element {
    --my-color: #ffffff;
}

.element2 {
    color: var(--my-color);
}

위와 같이 사용하면, element2의 color가 #ffffff가 된다. 하지만 위처럼 작성하면 scope의 제약이 생기므로, 보통은 root에 선언한다(물론 제약이 필요한 경우에는 root에 할 필요가 없다).

:root {
    --my-color: #ffffff;
    --my-color2: #000000;
}

이렇게만 선언해 두면, 연결된 어디서든 변수를 가져다가 사용할 수 있다. SCSS 또한 마찬가지로 사용하면 된다.