Scss 主题化 mixin 不适用于伪元素

编程问答 2022-05-14

问题描述

我正在使用 Themify me (https://fjcalzado.github.io/DemoSeries-SASS-Easy-Theming/) 来管理我的网络应用程序中的不同主题。这是一个角度项目。

mixin 运行良好，但不适用于伪元素（根本不应用规则）。我试图编辑 mixin 以使其在伪元素上工作，但没有成功。

@mixin themify( $properties,$keys,$transition-duration: $default-duration,$themes: $themeCollection)
{
  // Iterate over the themes.
  @each $theme,$themeItem in $themes {
    // Create a selector CLASS-THEME and also THEME-CLASS.
    &.theme-#{$theme},.theme-#{$theme} & {
      // Iterate over each property-key value.
      @for $i from 1 through length($properties){
        $property: nth($properties,$i);
        $key: nth($keys,$i);
        #{$property}: map-get($themeItem,$key);
      }
      // Finally add transitions over themified properties.
      // transition-property: #{$properties};
      // transition-duration: $transition-duration;
    }
  }
}

如果有人用混入SCSS一点经验来解释我为什么它不工作，我能做些什么来纠正。谢谢！

不起作用的用法示例：

&:after {
      display: block;
      content: '';
      width: 70%;
      height: 3px;
      border-radius: 1rem;
      // background: red;
      @include themify(background,neutral300);
      position: absolute;
      top: 0.9rem;
      left: -35%;
      z-index: -1;
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularmixinsmixinssasssass