SCSS 변수로 CSS 변수 만들기

SASS는 CSS 변수(사용자 정의 속성이라고도 함)를 특수 방식으로 처리하므로 CSS 변수를 동적으로 만드는 데 어려움이 있습니다.

Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is.

SASS docs
이것은 문제를 일으킬 수 있다. 특히 내가 원하는 상황에서는

많은 기존 코드에서 사용되므로 SASS 변수를 유지합니다

.

새 코드에 CSS 변수 추가

다음은 내가 이 문제를 어떻게 해결했는지다.이것은 SASS 변수의 이름을 여전히 반복하기 때문에 이상적이지 않다. 그러나 이것은 나의 상황에 적용되기 때문이다.🤷

$primary-color: #30dbb4;

@mixin add-css-variable($name, $color) {
  --#{$name}: $color;
}

:root {
  // repeat as necessary for all your vars
  @include add-css-variable('primary-color', $primary-color);
}

원더SassMeister playground에서 테스트를 할 수 있어요.