SCSS 활용 팁 10. SCSS변수를 CSS변수와 연동하여 한번에 관리하기

SCSS의 변수는 강력하지만, 런타임 동작이나 동적 스타일링과 관련된 한계가 존재합니다. SCSS 변수와 CSS의 변수를 연동하면, SCSS에서 선언한 변수값을 CSS에도 할당하기때문에 SCSS 변수의 기능은 활용하고, CSS 변수로서 런타임 동작으로 확장시킬 수 있습니다.

SCSS변수의 한계 

SCSS변수는 막강한 기능을 가지고 있지만, 컴파일시에만 작동하며 일단 CSS로 컴파일되고 난 후에는 변수값을 동적으로 변경할 수 없는 한계를 가지고 있습니다. 이는 사용자 입력, 시스템 설정, 환경 변화에 따른 스타일을 동적으로 변경해야 하는 경우 불리합니다. 또한, 변수의 값이 컴파일 된 CSS코드에 직접적으로 출력되는 방식이므로, 여러번 반복하여 사용할 경우 CSS파일의 크기를 증가시킵니다.

결론적으로 SCSS변수는 정적 스타일 정의 및 복잡한 계산에는 탁월하지만, 동적 스타일링이나 런타임 동작이 필요한 경우 CSS 변수를 보완적으로 사용하는 것이 효과적일 수 있습니다.

SCSS변수로 CSS변수 정의

SCSS의 변수 값을 CSS변수로 할당하는 코드입니다. 앞서 다루었던 보간을 사용합니다.

// SCSS 변수 선언
$primary-color: #3498db;
$secondary-color: #2ecc71;

// CSS 변수에 SCSS 변수 할당
:root {
  --primary-color: #{$primary-color};
  --secondary-color: #{$secondary-color};
}

위와 같이 정의하고, var(--variable-name)형태로 사용합니다.

// 스타일에서 CSS 변수 사용
body {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

// CSS 변수 재정의 가능 (예: 다크 모드)
.dark-mode {
  --primary-color: #ffffff;
  --secondary-color: #333333;
}

SCSS변수를 CSS변수와 연동하는 믹스인 만들기

변수간 연동을 믹스인으로 만들어 관리하면 재사용성과 유지보수성을 더욱 높일 수 있습니다. 일단 아래와 같이 SCSS변수들을 맵(Map)형태로 정리합니다.

// SCSS 변수들을 맵으로 정의
$theme-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c,
  warning: #f1c40f
);

그리고 믹스인을 사용하여 CSS변수로 정의하겠습니다.

// SCSS 변수를 CSS 변수로 정의하는 믹스인
@mixin export-to-css($map) {
  @each $key, $value in $map {
    --#{$key}: #{$value};
  }
}

이제 믹스인을 사용해 봅시다.

// :root에 CSS 변수 정의
:root {
  @include export-to-css($theme-colors);
}

// CSS 변수 사용
body {
  color: var(--primary);
  background-color: var(--secondary);
}

button {
  background-color: var(--danger);
  color: var(--warning);
}