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

发布于 2022-09-13 00:39:29 字数 1636 浏览 28 评论 0

$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;
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文