細談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

以上僅我我的看法，若有錯誤之處，歡迎指正。如您以爲個人文章對您有幫助，請點擊下方「推薦」，讓更多的人看到。