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

虽然作者不同，分别是神飞和大漠，但内容都是翻译的同一篇文章：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的使用场景，它很简单粗暴，完全破坏了作用域规则。实际项目中也没使用过。不到万不得已，慎用。