HTML 요소 클래스를 기반으로 동적 Sass 변수 구성

질문: HTML 요소에 적용된 클래스를 기반으로 Sass 색상 변수를 동적으로 설정할 수 있나요? ?

답변: 예, Sass include 또는 믹스인을 사용하여 이를 달성할 수 있습니다.

포함 사용

별도의 파일(_theme .scss), Sass 변수를 사용하여 스타일을 정의합니다:

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

기본 Sass 파일(main.scss)에서 HTML 요소의 클래스를 기반으로 포함을 가져옵니다.

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @import "theme";
 }
}

믹스인 사용

또는 색상을 인수로 사용하는 믹스인을 만들 수 있습니다.

@mixin theme($accent, $base, $flat) {
    // Define styles using the passed variables
}

기본 Sass 파일에서 적절한 색상으로 믹스인을 호출합니다.

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @include theme($accent, $base, $flat);
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @include theme($accent, $base, $flat);
 }
}

이 접근 방식을 사용하면 클래스에 따라 HTML 요소에 동적으로 다양한 테마를 적용할 수 있습니다.