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;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论