scss @mixin和函数的执行顺序是什么样的?下面代码运行后为什么多了两个

$th: 'default'; //默认
$tha: 'blueWhite'; //蓝白
$thb: 'blackWhite'; //黑白

// 主题变量
$themes:(                                                                                                                                                                                               
  default-color :($th:#cad6dd, $tha:#666, $thb:#50607c),
    default-color1 :($th:#cad6dd, $tha:#666, $thb:#50607c),
  theme-color :($th:$color-1, $tha:$color-27, $thb:$color-3),
   );

@mixin getTheme($themes,,$themesMap:($th,$tha,$thb)){
    @each $thm in $themesMap{
        .theme-#{$thm} & {
            @each $key,$value in $themes{
                @if(type-of($value) == 'map'){
                  $v:map-get($value,$thm);
                  $theme-map: () !global;
                  $theme-map: map-merge($theme-map,($key:$v)) !global;
                  @content;
                  $theme-map: null !global;
                }
             
            }
        }
    }
};

@function themed($key) {
  @return map-get($theme-map,$key)
};

div  {
    p{
  font-size: 12px;
    @include getTheme($themes) {
       border: themed("default-color") !important;
       color: themed("default-color");
    }
    }
}


结果是,为什么会多了两个空的important
.theme-default div p {
  border: #cad6dd !important;
  color: #cad6dd;
  border: !important;
  border: !important;
}
.theme-blueWhite div p {
  border: #666 !important;
  color: #666;
  border: !important;
  border: !important;
}
.theme-blackWhite div p {
  border: #50607c !important;
  color: #50607c;
  border: !important;
  border: !important;
}
阅读 674
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进