Sass @mixin - 防止选择器重复并在单个选择器下组合所有样式

Question

我写了这个@mixin 来在一行中设置明暗主题的样式。

@mixin setThemeDynamicCSSRule($property, $light-theme-value, $dark-theme-value) {
     #{$property}: #{$light-theme-value};
    
      .dark-mode & {
          #{$property}: #{$dark-theme-value}   
      }
}

body {
    @include setThemeDynamicCSSRule(color, black, white);
    @include setThemeDynamicCSSRule(background-color, white, black);
    @include setThemeDynamicCSSRule(font-size, 16px, 32px);
}

这会返回我：

body {
  color: black;
  background-color: white;
  font-size: 16px;
}
.dark-mode body {
  color: white;
}
.dark-mode body {
  background-color: black;
}
.dark-mode body {
  font-size: 32px;
}

它不断为每个 setThemeDynamicCSSRule() 调用重复 .dark-mode body 选择器。

它仍然可以完成工作，但理想情况下我希望 css 编译为：

body {
  color: black;
  background-color: white;
  font-size: 16px;
}
.dark-mode body {
  color: white;
  background-color: black;
  font-size: 32px;
}

Answer 1

不完全是您正在寻找的方式......但向前思考它是想要的结果。并且可能是一种更简单、更整洁的方式来在一个地方组织您的特殊主题属性。

将您不同的主题属性/值包装到嵌套地图中。比使用适应的 mixin。

$themes: (

    color: (
        'light': 'black',
        'dark': 'white',
    ),
    background-color: (
        'light': 'white',
        'dark': 'black',
    ),
    font-size: (
        'light': 16px,
        'dark': 32px,
    ),

);

@mixin setThemeStyles($themes){

    @each $property, $values in $themes {
        #{$property}: map-get($values, 'light' );
    }

    .dark-mode & {
        @each $property, $values in $themes{
            #{$property}: map-get($values, 'dark');
        }
    }
    

}

body {
    @include setThemeStyles($themes);
}



//######>> RESULT IS YOUR WANTED CSS
body {
  color: "black";
  background-color: "white";
  font-size: 16px;
}
.dark-mode body {
  color: "white";
  background-color: "black";
  font-size: 32px;
}