今天就跟大家聊聊有關(guān)如何在SASS 中使用變量的默認(rèn)值，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括牙克石網(wǎng)站建設(shè)、牙克石網(wǎng)站制作、牙克石網(wǎng)頁制作以及牙克石網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，牙克石網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到牙克石省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

SASS 中定義的變量，后設(shè)置的值會(huì)覆蓋舊的值。

$color: red;
$color: blue;

.btn {
    color: $color;
}

編譯后為：

.btn {
  color: blue; }

如果你編寫了一個(gè) UI 庫提供 SASS 文件，可能會(huì)提供一些參數(shù)供用戶使用時(shí)自定義。而在 SASS 組件內(nèi)部，我們需要應(yīng)用上用戶設(shè)置的這些值。但是如果使用者沒有自定義變量的值，那這些變量應(yīng)該有自己的默認(rèn)值。

利用前面提到的覆蓋機(jī)制是不能實(shí)現(xiàn)的。因?yàn)闊o論是你在 @import UI 庫之前設(shè)置還是之后，都不能影響這個(gè)導(dǎo)入文件中的值。如果你設(shè)置的值在導(dǎo)入之前，那么 UI 庫中的變量因?yàn)樵诤竺?，所以你的設(shè)置會(huì)被覆蓋而不起作用；如果你的設(shè)置在導(dǎo)入之后，那更加不起作用了。

假設(shè)這是 UI 中的樣式文件：

_lib.scss

$color: red;
.btn {
    color: $color;
}

在另一個(gè)文件中使用，并且試圖自定義變量的值：

page.scss

@import 'lib';
$color: blue;

或：

page.scss

$color: blue;
@import 'lib';

兩者編譯結(jié)果均為：

.btn {
  color: red; }

!default

針對(duì)這種情況，SASS 提供了 !default 標(biāo)識(shí)。將該標(biāo)識(shí)應(yīng)用于變量值后面，表示如果該變量沒有在其他地方定義或即便定義了但值為 null，那此處設(shè)置的默認(rèn)值才生效，否則使用其他地方設(shè)置的那個(gè)值。

將上面 _lib.scss 進(jìn)行改造：

_lib.scss

- $color: red;
+ $color: red!default;
.btn {
    color: $color;
}

使用：

$color: blue;

@import "lib";

注意：需要將自定義的值先于 @import，否則也不生效。

此時(shí)編譯結(jié)果將是想要的那樣，應(yīng)用上了外部自定義的變量值。

.btn {
  color: blue; }

看完上述內(nèi)容，你們對(duì)如何在SASS 中使用變量的默認(rèn)值有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文題目：如何在SASS中使用變量的默認(rèn)值
網(wǎng)站路徑：http://aaarwkj.com/article26/pjdhcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站排名、用戶體驗(yàn)、、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)