国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

細(xì)談sass和less中的變量及其作用域

wslongchen / 964人閱讀

摘要：如果存在一個(gè)同名的全局變量，這個(gè)全局變量也不會(huì)被重寫，除非同名的局部變量被聲明時(shí)使用關(guān)鍵字。

博客原文地址：Claiyre的個(gè)人博客 https://claiyre.github.io/
博客園地址：http://www.cnblogs.com/nuannuan7362/
如需轉(zhuǎn)載，請(qǐng)?jiān)谖恼麻_頭注明原文地址
------------------------------------------------------------------------“如果我將來是個(gè)普通人，就要做不普通的事”
前言

眾所周知，css是靜態(tài)語言，雖功能強(qiáng)大，但用起來還是略微不爽，于是便有了動(dòng)態(tài)樣式語言，sass和less。動(dòng)態(tài)樣式語言的精髓就在于其有了變量，其中的諸多功能都是建立在變量之上的。因此，徹底弄懂sass和less中變量的異同之處，是學(xué)好它們的關(guān)鍵！
本文由淺至深，逐步展開介紹，并從大家所熟知的JS變量的角度，講述sass和less變量作用域。

正文

sass和less都允許使用變量，且對(duì)變量的類型沒有限制，這一點(diǎn)和js極為相似，非常靈活。但兩者的不同都有哪些呢？

變量標(biāo)識(shí)符不同

sass中規(guī)定，以美元符號(hào) $ 開頭的即表示變量，而less中以符號(hào) @ 開頭表示變量。這點(diǎn)很容易理解，不再多說。

變量插值方式不同

在兩種語言中，變量都可以以一定的方式插入到字符串中去，這個(gè)特性極為有用，但兩種語言的插入方式不同，具體請(qǐng)看下例：

//sass 中

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

//less中

@direction: left;

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


//編譯后的css代碼是相同的，如下：

.myPadding{
    padding-left: 20px;
}
變量作用域

在sass 3.4.0之前，sass可以說是沒有局部變量和全局變量之分的，即后聲明的同名變量總是會(huì)覆蓋之前的同名變量，不管后聲明的變量是位于何處。
此時(shí)，less和sass的變量作用域有很大的不同之處。先看一段熟悉的js代碼：

//代碼塊A

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

由于閉包的作用，匿名函數(shù)內(nèi)部可以引用到外部的變量a,因此上面的代碼可以正常運(yùn)行。再來看下面這個(gè):

//代碼塊B

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

了解js鏈?zhǔn)阶饔糜虻呐笥岩欢攵松厦娴拇a。
在匿名函數(shù)的內(nèi)部聲明了一個(gè)局部變量，局部變量并不會(huì)影響全部變量，所以代碼最后輸出的仍然是1。

那么回到正題，sass 3.4.0之前 的變量設(shè)計(jì)思想是類似于代碼塊A的，即不帶關(guān)鍵字var的局部變量聲明，而less的思想類似代碼塊B，帶關(guān)鍵字var的局部變量聲明。

看到這，很多人估計(jì)就想開始吐槽sass不人性化的設(shè)計(jì)了，萬一我一不小心聲明了一個(gè)局部變量，它和某個(gè)全局變量同名了，那不豈不是要釀成大禍！
大家先別急著吐槽，人家sass這不是也改進(jìn)了嘛~ 而且sass不僅改了，還附送了彩蛋 !global

sass官網(wǎng)上 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).

翻譯過來便是：沒有位于第一層（全局）的變量聲明現(xiàn)在都被默認(rèn)為是局部的。如果存在一個(gè)同名的全局變量，這個(gè)全局變量也不會(huì)被重寫，除非同名的局部變量被聲明時(shí)使用關(guān)鍵字!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
}

上面的代碼沒有什么實(shí)際意義，但作為例子，簡潔明了便好。

有一點(diǎn)需要說明的是，sass 3.4.0 是在14年8月份發(fā)布的，但現(xiàn)在網(wǎng)上的關(guān)于sass變量的文章對(duì)作用域的說明，大多仍舊停留在3.4.0之前。希望大家能注意sass這個(gè)重要的改進(jìn)，以免在開發(fā)過程中帶來不便。在此也得出一個(gè)血淚教訓(xùn)，盡量看英文官方文檔啊啊啊啊

結(jié)語

sass和less兩種動(dòng)態(tài)樣式語言的誕生，賦予了css更大的靈活性，在學(xué)習(xí)使用的過程中，一定要注意區(qū)分兩者的不同，靈活運(yùn)用。

參考：

http://www.w3cplus.com/preprocessor/sass-basic-variable.html

http://sass-lang.com/documentation/file.SASS_CHANGELOG.html

以上僅我個(gè)人見解，如有錯(cuò)誤之處，歡迎指正。如您覺得我的文章對(duì)您有幫助，請(qǐng)點(diǎn)擊下方“推薦”，讓更多的人看到。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/112389.html

相關(guān)文章

  • 前端入門23-CSS預(yù)處理器（Less&Sass）

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

    freecode 評(píng)論0 收藏0

  • 大話css預(yù)編譯處理（三）：基礎(chǔ)語法篇

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

    劉東 評(píng)論0 收藏0

  • 關(guān)于sass、scss、less的概念性知識(shí)匯總

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

    HmyBmny 評(píng)論0 收藏0

  • 關(guān)于sass、scss、less的概念性知識(shí)匯總

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

    xuweijian 評(píng)論0 收藏0

  • SASS

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

    chanthuang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<