细谈sass和less中的变量及其做用域

博客原文地址：Claiyre的我的博客 https://claiyre.github.io/
博客园地址：http://www.cnblogs.com/nuannuan7362/
如需转载，请在文章开头注明原文地址

前言

众所周知，css是静态语言，虽功能强大，但用起来仍是略微不爽，因而便有了动态样式语言，sass和less。动态样式语言的精髓就在于其有了变量，其中的诸多功能都是创建在变量之上的。所以，完全弄懂sass和less中变量的异同之处，是学好它们的关键！
本文由浅至深，逐步展开介绍，并从你们所熟知的JS变量的角度，讲述sass和less变量做用域。

正文

sass和less都容许使用变量，且对变量的类型没有限制，这一点和js极为类似，很是灵活。但二者的不一样都有哪些呢？

变量标识符不一样

sass中规定，以美圆符号 $ 开头的即表示变量，而less中以符号 @ 开头表示变量。这点很容易理解，再也不多说。

变量插值方式不一样

在两种语言中，变量均可以以必定的方式插入到字符串中去，这个特性极为有用，但两种语言的插入方式不一样，具体请看下例：

//sass 中

$direction: left;
.myPadding{
    padding-#{$direction}: 20px;                             
}

//less中

@direction: left;

.myPadding{
    padding-@{direction}: 20px;
}


//编译后的css代码是相同的，以下：

.myPadding{
    padding-left: 20px;
}

变量做用域

在sass 3.4.0以前，sass能够说是没有局部变量和全局变量之分的，即后声明的同名变量老是会覆盖以前的同名变量，无论后声明的变量是位于何处。
此时，less和sass的变量做用域有很大的不一样之处。先看一段熟悉的js代码：

//代码块A

var a = 1;
(function (){
    a = 5;
    alert(a);             //a = 5;
})();
alert(a);                 //a = 5;

因为闭包的做用，匿名函数内部能够引用到外部的变量a,所以上面的代码能够正常运行。再来看下面这个:

//代码块B

var a = 1;
(function (){
    var a = 5;
    alert(a);             //a = 5;
})();
alert(a);                 //a = 1;

了解js链式做用域的朋友必定秒懂了上面的代码。
在匿名函数的内部声明了一个局部变量，局部变量并不会影响所有变量，因此代码最后输出的仍然是1。

那么回到正题，sass 3.4.0以前 的变量设计思想是相似于代码块A的，即不带关键字var的局部变量声明，而less的思想相似代码块B，带关键字var的局部变量声明。

看到这，不少人估计就想开始吐槽sass不人性化的设计了，万一我一不当心声明了一个局部变量，它和某个全局变量同名了，那不岂不是要酿成大祸！
你们先别急着吐槽，人家sass这不是也改进了嘛~ 并且sass不只改了，还附送了彩蛋 !global

sass官网上 3.4.0版本的 Backwards Incompatibilities – Must Read! 中有这样一条：

All variable assignments not at the top level of the document are now local by default. If there’s a global variable with the same name, it won’t be overwritten unless the !global flag is used. For example, $var: value !global will assign to $var globally. This behavior can be detected using feature-exists(global-variable-shadowing).

翻译过来即是：没有位于第一层（全局）的变量声明如今都被默认为是局部的。若是存在一个同名的全局变量，这个全局变量也不会被重写，除非同名的局部变量被声明时使用关键字!default。

举例说明：

$color: blue;
a{
    $color: red;
    color: $color;         //red
}
p{
    color: $color;         //blue
}

//可是，若使用 !global

span{
    $color: yellow !global;
    color: $color;               //yellow
}
div{
    color: $color;               //yellow
}

上面的代码没有什么实际意义，但做为例子，简洁明了便好。

有一点须要说明的是，sass 3.4.0 是在14年8月份发布的，但如今网上的关于sass变量的文章对做用域的说明，大多仍旧停留在3.4.0以前。但愿你们能注意sass这个重要的改进，以避免在开发过程当中带来不便。在此也得出一个血泪教训，尽可能看英文官方文档啊啊啊啊

结语

sass和less两种动态样式语言的诞生，赋予了css更大的灵活性，在学习使用的过程当中，必定要注意区分二者的不一样，灵活运用。

参考：

• http://www.w3cplus.com/preprocessor/sass-basic-variable.html
• http://sass-lang.com/documentation/file.SASS_CHANGELOG.html

以上仅我我的看法，若有错误之处，欢迎指正。如您以为个人文章对您有帮助，请点击下方“推荐”，让更多的人看到。