SASS系列之:!global VS !deafult

先脑补两组场景。

场景一:
同事们每天中午都会外出吃饭。通常情况下都会先问,去哪儿吃啊?不知道啊?下楼再说吧。到了楼下好不容易有个人站出来说,既然没人说我可就说了啊,咱们去吃香草香草吧。没人反对就去,如果有人反对的话,我听大家的。嗯,此人非常在意别人的看法,懂得退让与妥协。
 
场景二:
部门A在楼下讨论去哪儿吃饭。按照惯例,是少数服从多数的原则,但是有个人非常的任性和强势,投什么票啊,烦不烦啊,我今天就想去吃大瓦罐!这会儿部门B过来了,他们原计划去吃麒麟雅苑的,这个人又跑到那边游说,麒麟雅苑有什么好啊,上菜又慢又难吃,天天吃不腻啊,跟我们去吃大瓦罐吧。于是,生拉硬拽之下,部门A和部门B都去了大瓦罐。此人非常强势,听不得别人的意见,他要别人都要服从于他的意见。
 
其实今天讨论的是sass里的变量作用域的问题。
最初的时候,大家是认为sass的作用域是很奇怪的甚至是不合理的:
http://www.qianduan.net/an-introduction-to-less-and-comparison-to-sass.html
http://www.cn-sass.com/译文/an-introduction-to-less-and-comparison-to-sass.html
SASS系列之:!global <wbr>VS <wbr>!deafult <wbr>强势之徒与好好先生

虽然作者不同,分别是神飞和大漠,但内容都是翻译的同一篇文章:http://www.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/   时间是2011年。应该看出,sass意识到作用域这块儿的确有些奇葩,便在接下来的版本中做了改进,常规情况下,局部变量是无法覆盖全局变量的。
比方说:
----------------------------------------------------------------------
$color: red;
.test1{
    $color: blue;
    color: $color;
}
.test2{
    color: $color;
}
-----------------------------------------------------------------------
 
执行结果是:
.test1{
    color: blue;
}
.test2{
    color: red;
}
-----------------------------------------------------------------------
猜都猜的到。
如果是这种情况呢?
-----------------------------------------------------------------------
$color: red;
$color: yellow;
.test1{
    $color: blue;
    color: $color;
}
.test2{
    color: $color;
}
-------------------------------------------------------------------------
结果是:
.test1{
    color: blue;
}
.test2{
    color: yellow;
}
------------------------------------------------------------------------
red完全被yellow覆盖,这也很容易理解。
我们都知道,在CSS中,!important可以改变样式的权重优先级。其实sass中也有类似的参数,先说说老好人:!default。
还是后一种情况:
------------------------------------------------------------------------
$color: red;
$color: yellow!default;
.test1{
    $color: blue;
    color: $color;
}
.test2{
    color: $color;
}
-------------------------------------------------------------------------
大家猜一下结果。
不卖关子了,结果是:
.test1{
    color: blue;
}
.test2{
    color: red;
}
---------------------------------------------------------------------------
也就是说,yellow虽然在后面,却没有像上一次覆盖掉上一句的red!这是为什么呢?关键在于!default;它的作用在于降低变量的优先级,不至于因为排序的问题覆盖掉上一条的相同命名的变量。很像好好先生,不是吗?很善于做出妥协。
 
它的使用场景大多用在组件库中。因为组件库都是通用样式,实际业务中的样式的优先级肯定是高于组件样式的,所以为了防止在使用过程中组件排在业务之后而将其覆盖,而做出的妥协。或者用在协作开发中,如果自己很多地方拿不准或者需要以他人为准的情况。假如你定义了,使用你的,假如你没有定义,默认使用我的。很像是一个备胎。。。其实我们还可以叫得更学术一些,比方说:默认变量值。
 
万物都是相生相克的,一物降一物,有这样的参数,必然有人来站出来承担对立功能。
现在我们来说一下强硬派!global。
-------------------------------------------------------
$color: red;
.test1{
    $color: blue!global;
    color: $color;
}
.test2{
    color: $color;
}
----------------------------------------------------------
看到了吧。test1和test2都变成了color:blue。这说明!global影响了全局变量,进而影响到了其他选择器的局部变量。除非在test2里重置一下$color才可以抵消其影响。
 
我想像不出!global的使用场景,它很简单粗暴,完全破坏了作用域规则。实际项目中也没使用过。不到万不得已,慎用。
原文地址:https://www.cnblogs.com/web-record/p/9883540.html