Styled components 에서 css 변수 사용 with sass

css 변수 var 로 공통변수값을 만들어 사용하면 전역으로 사용하는 color 나 font-size 등을 관리하는데 용이하다.

이번 프로젝트에서 Styled-components 를 사용하면서 공통변수만 scss 로 정의해서 사용하는 방법을 선택했다. (Nextjs App 라우팅 기준)

Styled-components & sass 설치

npm i styled-components
npm i -D sass

_variables.scss 파일 생성해서 공통으로 사용할 스타일 변수 정의

$primary-color: #0070f3;
$secondary-color: #ff4081;
$primary-text-color: #000000;
$basic-font-size: 16px;

:root {
  --primary-color: #{$primary-color};
  --secondary-color: #{$secondary-color};
  --primary-text-color: #{$primary-text-color};
  --basic-font-size: #{$basic-font-size}
}

layout.tsx 에서 호출

import "@/styles/_variables.scss"

GlobalStyles.ts 에서 참조하기

html, body {
    font-size: var(--basic-font-size);
    color: var(--primary-text-color);
}