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

wslongchen 發布于2019-08-29 13:08 / 973人閱讀

摘要：如果存在一個同名的全局變量，這個全局變量也不會被重寫，除非同名的局部變量被聲明時使用關鍵字。

博客原文地址：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

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

GPU云服務器云服務器 php變量作用域 js作用域和上下文變量作用范圍作用域

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112389.html

前端入門23-CSS預處理器（Less&Sass）

摘要：聲明聲明本篇內容梳理自以下幾個來源網站的文檔中文網感謝大佬們的分享。這個時候，預處理器就出現了，其實應該是說和這類語言出現了。聲明本篇內容梳理自以下幾個來源： Github:smyhvae/web Bootstrap網站的 less 文檔 Sass中文網感謝大佬們的分享。正文-CSS預處理（less&Sass） CSS預處理什么是 CSS 預處理？為什么要有 CSS 預處理？這...

freecode 2019-04-23 13:07 評論0 收藏0
大話css預編譯處理（三）：基礎語法篇

摘要：值得慶幸的是，這三款預處理器語言的語法和語法都差不多。在這一節中，我們依次來對比一下這三款預處理器語言各種特性的異同之處，以及使用方法。預處理器語言支持任何變量例如顏色數值文本。一、Sass、LESS和Stylus的語法每一種語言都有自己一定的語法規則，CSS預處理器語言也不例外，在真正使用CSS預處器語言之前還有一個不可缺少的知識點，就是對語法的理解。值得慶幸的是，這三款CSS預...

劉東 2019-08-30 15:55 評論0 收藏0
關于sass、scss、less的概念性知識匯總

摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。也是成熟的預處理器之一，而且有一個穩定，強大的團隊在維護。這篇文章主要解答以下幾個問題，供前端開發者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預處理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 評論0 收藏0
關于sass、scss、less的概念性知識匯總

摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。也是成熟的預處理器之一，而且有一個穩定，強大的團隊在維護。這篇文章主要解答以下幾個問題，供前端開發者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預處理器？ 3、Sass和Less的...

xuweijian 2019-08-02 11:15 評論0 收藏0
SASS

摘要：編譯之后結果混合作用繼承復用定義使用傳參可以對混合進行傳遞參數，和設置默認值。占用中的位置，使用其樣式內容。在模式下，進行色彩運算時，要求通明度必須保持一致，否則無法進行運算。 Sass 是一個CSS 的擴展，在語法CSS語法的基礎上，增加變量，嵌套規則, 混合,導入，函數等功能對CSS進行預處理的中間語言文件格式 .sass ，.scssscss是對css的一種拓展，跟...

chanthuang 2019-08-29 11:01 評論0 收藏0