SASS 中的 `!default` 標誌

本文將說明 SASS 中的 !default 標記。

我們將詳細解釋 !default 標記，並透過實際範例示範如何使用它。

YouTube Video

SASS 中的 !default 標誌

SASS 的 !default 標誌是在樣式表中提升模組化與重複使用性的重要工具。透過這個標誌，你可以為變數設置預設值，同時允許其他地方定義的值優先替代。這裡，我們將詳細說明 !default 標誌，並透過實例演示其用法。

!default 標誌是 SASS 特有的功能，用來設定變數的預設值。加上這個標誌後，會達到以下行為：。

• 指定預設值 只有在變數尚未於其他地方定義時才會設定這個值。

• 控制優先順序 如果變數已被定義，其值將不會被覆蓋。

這項功能在建立模組或函式庫時特別有用。使用者可以自訂變數值，但如果沒有指定，則會使用預設值。

基本例子

以下代碼說明了 !default 標誌的基本用法。

1// _variables.scss
2$primary-color: blue !default;

• 使用 !default 標記來定義預設變數 $primary-color。

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• 使用 @use 匯入變數，並透過 with 覆蓋 $primary-color。

輸出 CSS

1body {
2    background-color: red;
3}

• 在此範例中，因為在 main.scss 中將 $primary-color 設為 red，所以 _variables.scss 中定義的 blue 將不會被使用。

當變數未被定義時

若變數未在 main.scss 中定義，則將使用預設值。

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• 由於未進行覆蓋匯入，因此將套用 _variables.scss 中 $primary-color 的預設值 blue。

輸出 CSS

1body {
2    background-color: blue;
3}

在巢狀模組中的用法

在模組內使用 !default 可實現彈性的自訂。

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• 使用 !default 標記定義 $primary-color 與 $button-color。

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• 匯入 variables 模組，並使用 $button-color 變數指定 .button 的顏色。

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• 使用 @use 搭配 with 將 $button-color 覆蓋為 orange，並使用 buttons 模組。

輸出 CSS

1.button {
2    color: orange;
3}

• 透過這種方式，模組既能提供預設值也能保留使用者自訂設定。

注意事項

使用 !default 標誌時，應注意以下幾點：。

• 選擇合適的預設值 預設值應根據常見場景來選擇。

• 有意義的設計 請使用一致的變數命名並避免與其他模組衝突。

• 順序檢查 為讓 !default 標誌如預期運作，必須正確管理變數覆寫的順序。

實際應用情境

主題切換

例如，在建立支援主題切換的資料庫時，可以使用 !default 來提供可自定義的預設值。

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}

• 為主題使用 !default 標記定義 $background-color 和 $text-color，並套用到 body。

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• 透過 @use 與 with 覆蓋 $background-color 來自訂主題。

輸出 CSS

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

可重複使用的元件

於可重複使用的按鈕元件中，可以提供預設樣式，同時允許使用者修改顏色。

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}

• 使用 !default 定義按鈕的預設背景色與文字顏色，並套用樣式。

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• 用 @use 與 with 覆蓋 $button-bg 來自訂按鈕顏色。

輸出 CSS

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

!default 標誌總結

SASS 的 !default 標誌是在建立模組和函式庫時非常強大的工具。它提升了重複使用性，同時允許彈性自訂。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video