博客原文地址：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
以上僅我個人見解，如有錯誤之處，歡迎指正。如您覺得我的文章對您有幫助，請點擊下方“推薦”，讓更多的人看到。