博客原文地址：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以上仅为个人看法，如有错误，欢迎指正。如果您觉得我的文章对您有帮助，请点击下方“推荐”，让更多人看到。
