主题 Sass，React 应用程序上的 scss 主题混合

Question

i use sass-themify, but it only works for node element or id#, I would like to user it with className, how could I change the mixin ? Thanks for your precious help

as an example :

header {
  width: 100%;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
  position: fixed;
  z-index: 666;
  img {
    height: 50px;
  };
}
@include sass-themify($element:header){
  background-color: sass-themify-get-color("primary-color");
} 

is working fine, whereas

.staffName {
  font-size: 20px;
  //color: $GR-tourterelle;
  font-weight: 400;
  font-style: italic;
  margin-right: 40px;
}
@include sass-themify($element:'.staffName'){
  color: sass-themify-get-color("primary-color");
} 

or even

@include sass-themify() {
  .staffName {
    color: sass-themify-get-color("hello");
  }
}

does not work I also tried adding this in the mixin, but it is not working either

     .{$element}.#{$theme-name}{
        @content;
      }

here is the mixin :

@mixin sass-themify-init($scheme-table){
  @if $scheme-table == null{
    @error "[sass-themify] sass-themify mixin needs a valid $scheme-table map defined"
  } @else {
    @if variable-exists("sass-themify-scheme-table") {
      @warn "[sass-themify] sass-themify has already been initialized once. Initializing again will replace the previous initialized color scheme"
    }
    $sass-themify-scheme-table: $scheme-table !global;
  }
}

@mixin sass-themify($element:"body"){
  //determine if global varaible has been declared or not
  @if not variable-exists("sass-themify-theme-name") {
    $sass-themify-theme-name: null !global;
  }

  @each $theme-name, $color-map in $sass-themify-scheme-table{
    $sass-themify-theme-name: $theme-name !global;
    @if $theme-name != "default"{
      #{$element}.#{$theme-name}{
        @content;
      }
    } @else {
      #{$element}{
        @content;
      }
    }
    $sass-themify-theme-name: null !global;
  }
}

@function sass-themify-get-map-deep($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}


@function sass-themify-get-color($component){
  @if $sass-themify-scheme-table == null {
    @error "[sass-themify] You need to call sass-themify mixin to initialize a theme before you can call the sass-themify-get function.";
  }
  @if $sass-themify-theme-name == null {
    @error "[sass-themify] sass-themify-get function can only be used within the scope of the 'sass-themify' mixin.";
  }
  @return sass-themify-get-map-deep($sass-themify-scheme-table,$sass-themify-theme-name,$component);
}

@function sass-themify-get-theme-name(){
  @return $sass-themify-theme-name;
}

`````

and my themes :
`````
@import './colors';
@import './sass_themify.scss';

$theme : (
  'YR-theme' : (
    'header-color' : #6f7e0d,
    'header-image' : none,
    'hello' : #fff,
    'text' : $YR-brown,
    'CTA' : $YR-light-raspberry,
    'CTA-hover' : $YR-raspberry,
    'show-btn' : $YR-green,
    'show-btn-hover' : $YR-olive,
  ),
  'GR-theme' : (
    'header-color' : $GR-beige--,
    'header-image' : url(data:image/png;base64,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),
    'hello' : $GR-tourterelle,
    'text' : $GR-roche,
    'CTA' : $GR-orange,
    'CTA-hover' : $GR-orange-hover,
    'show-btn' : $GR-tourterelle,
    'show-btn-hover' : $GR-tourterelle-hover,
  )
);

@include sass-themify-init($theme);

Answer 1

我使用不同的 sass解决了这个问题