博客原文地址:Claiyre的个人博客https://claiyre.github.io/博客园地址:http://www.cnblogs.com/nuannuan7362/such如要转载,请在文章开头注明原文地址------------------------------------------------------------------------《如果我以后是一个普通人,我会做非凡的事”前言众所周知,css是一门静态语言。虽然强大,但是用起来还是有点不适应,所以才有了动态风格的语言,sass和less。动态风格语言的本质是它有变量,它的很多功能都是基于变量的。因此,透彻理解sass和less中变量的异同是学好它们的关键!本文由浅入深循序渐进地介绍,从众所周知的JS变量的角度来描述sass和less变量的作用范围。textsass和less都允许使用变量,而且对变量的类型没有限制,这点和js很像,非常灵活。但是两者之间有什么区别呢?变量标识符不同于sass,它以美元符号$开头表示一个变量,而less以符号@开头表示一个变量。这个很容易理解,就不多说了。变量插值方法不同在两种语言中,变量都可以按照一定的方式插入到字符串中。这个特性非常有用,但是两种语言的插入方法不同。有关详细信息,请参见以下示例://sass中的$direction:left;.myPadding{padding-#{$direction}:20px;}//@directioninless:left;.myPadding{padding-@{direction}:20px;}//编译后的css代码同上,如下:.myPadding{padding-left:20px;}sass之前的变量作用域3.4.0,sass可以说是不区分局部变量和全局变量了,就是后面声明的同名变量总是会覆盖前面的同名变量,不管后面声明的变量在什么地方。在这一点上,less和sass的变量作用域有很大的区别。先来看一段熟悉的js代码://代码块Avara=1;(function(){a=5;alert(a);//a=5;})();alert(a);//一个=5;由于闭包的作用,匿名函数可以引用外部变量a,所以上面的代码可以正常运行。看下面的//代码块Bvara=1;(function(){vara=5;alert(a);//a=5;})();alert(a);//a=1;懂js链作用域的朋友一定秒懂上面的代码。匿名函数内部声明了一个局部变量,局部变量不影响所有变量,所以代码最终输出还是1。所以回到正题,sass3.4.0之前的变量设计思路类似代码块A,即不带关键字var的局部变量声明,而less的思想类似于代码块B,带关键字var的局部变量声明。看到这里,估计很多人要开始吐槽sass设计的不人道了。如果我一不小心声明了一个与全局变量重名的局部变量,那可就酿成大祸了!别急着吐槽,sass不是也改进了吗~而且sass不仅改了,还自带彩蛋!BackwardsIncompatibilities–MustRead中有这么一行!globalsass官网3.4.0版本:所有不在文档顶层的变量赋值现在默认都是本地的。如果有一个同名的全局变量,除非使用!global标志,否则它不会被覆盖。例如,$var:value!global将全局分配给$var。可以使用特征存在(全局变量阴影)来检测此行为。翻译是:不在第一级(全局)的变量声明现在默认为本地。如果有同名的全局变量,这个全局变量不会被覆盖,除非同名的局部变量用关键字!default声明。例如:$color:blue;a{$color:red;颜色:$颜色;//红色}p{颜色:$颜色;//blue}//但是,如果你使用!globalspan{$color:yellow!global;颜色:$颜色;//黄色}div{颜色:$颜色;//yellow}上面的代码没有什么实际意义,只是作为一个例子,简洁明了。需要注意的一点是sass3.4.0是2014年8月发布的,但是网上大部分关于sass变量的文章还是解释了3.4.0之前的作用域。希望大家能够关注sass的这一重要改进,以免在开发过程中造成不便。这里也是血泪的教训,努力看官方英文文档啊啊啊啊啊啊啊啊啊结语sass和less两种动态样式语言的诞生赋予了css更大的灵活性。在学习和使用的过程中,一定要注意区分两者的区别,才能灵活运用。参考:http://www.w3cplus.com/preprocessor/sass-basic-variable.htmlhttp://sass-lang.com/documentation/file.SASS_CHANGELOG.html以上仅为个人看法,如有错误,欢迎指正。如果您觉得我的文章对您有帮助,请点击下方“推荐”,让更多人看到。
