변수를 사용하여 Theme Component에서 @if를 사용할 수 있는 방법이 있나요?

개발
1

부울 타입의 테마 설정을 사용하여 특정 스타일링을 사용할 수 있는지 결정하려고 합니다:

@if var(--my-variable) {
   .my-selector {
      display: block;
  }
}

그리고 포함된 파일의 다른 곳에서는 다음과 같이 설정했습니다:

:root {
  --my-variable: #{$my_boolean_setting_in_theme};
}

하지만 이렇게 하면 동작하지 않는 것 같습니다 …

변수가 true이든 false이든 상관없이 스타일링이 적용되고 있습니다.

2

런타임 CSS 변수인 --my-variable는 SASS/SCSS 빌드 타임의 @if 문에서 사용할 수 없습니다.

따라서 이 문제를 완전히 빌드 타임에서 처리해야 하며, SCSS 변수만 사용하는 것이 좋습니다. 다음과 같은 방식입니다:

@if $my_boolean_setting_in_theme == "true" {
  ...
}
3

데이비드, 고마워. 그런 식으로 온갖 조합을 다 시도해 봤는데, 왜 그 조합은 생각나지 못했는지 모르겠네. 고마워!