細談sass和less中的變數及其作用域

Claiyre發表於2017-08-08
變數

部落格原文地址：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更大的靈活性，在學習使用的過程中，一定要注意區分兩者的不同，靈活運用。

參考：

以上僅我個人見解，如有錯誤之處，歡迎指正。如您覺得我的文章對您有幫助，請點選下方“推薦”，讓更多的人看到。

相關文章