1. 程式人生 > 其它 >SCSS 檔案裡的感嘆號用法 - 給變數設定預設值

SCSS 檔案裡的感嘆號用法 - 給變數設定預設值

如下圖所示:

$useTabsOnPDP: false !default;

https://stackoverflow.com/questions/10643107/what-does-default-in-a-css-property-value-mean

含義如下:

!default 在 Bootstrap Sass 中經常使用。 它類似於反向 !important。 所有 Bootstrap 變數都使用 !default 設定,以允許開發人員進一步自定義載入程式。 使用 !default sass 只會定義一個尚未設定的變數。

//Example1 Dress color = red
$auroras-dress-color: blue;
$auroras-dress-color: red;

//Example2 Dress color = red
$auroras-dress-color: blue !default;
$auroras-dress-color: red;

//Example3 Dress color = blue
$auroras-dress-color: blue;
$auroras-dress-color: red !default;

那麼為什麼這很重要? Bootstrap 是一個包。 大多數人不會編輯 Bootstrap 原始碼。 永遠不要更新載入程式源。 要自定義載入程式,您將新增自己的變數檔案並使用載入程式程式碼編譯它,但永遠不要接觸本機載入程式包。 Bootstrap sass 的頁面在文件中詳細介紹瞭如何自定義和編譯它。

據我所知,Twitter Bootstrap 使用 LESS。 另一方面,!default 實際上是 Sass 的一部分,用於提供 Sass 變數 ($var) 預設值,這會使它在給定的上下文中無效,即使在 Sass 中也是如此。

此外,我在 LESS 文件中找不到任何對 !default 的引用,據我所知,它是 Sass 獨有的。 你確定你在 Bootstrap 的原始碼中找到了這個,而不是在其他地方? 因為老實說我不記得在 Bootstrap 的樣式表中看到過 Sass/SCSS 程式碼。

您可以在 sass-lang 網站的 doc 部分(變數)中找到以下確切定義和體面的解釋 - 預設值:

通常當你給一個變數賦值時,如果該變數已經有一個值,它的舊值會被覆蓋。 但是,如果您正在編寫 Sass 庫,您可能希望允許您的使用者在使用它們生成 CSS 之前配置您的庫變數。 為了實現這一點,Sass 提供了 !default 標誌。 僅當該變數未定義或其值為 null 時,才會為該變數賦值。 否則,將使用現有值。