SASS 中的 `!global` 標誌

本文將說明 SASS 中的 !global 標誌。

我們將說明 !global 標誌的詳細機制、使用範例以及注意事項。

YouTube Video

SASS 中的 !global 標誌

在 SASS 中，!global 標誌用於操作變數的作用域。正確理解並合理使用這個標誌，可以防止程式碼中產生非預期行為，提升易維護性。

什麼是 !global 標誌？

通常 SASS 變數是有作用域的。預設情況下，變數僅在其被定義的作用域中有效。也就是說，如果變數定義在函式或 mixin 內，則無法在該作用域外部存取。

不過，通過 !global 標誌，可以直接將變數指定到全域作用域。這樣變數就能跨作用域共享。

沒有 !global 標誌的情況下

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue; // Local variable (does not overwrite the global variable)
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // red
10}

• 在此代碼中，$color 定義於全域作用域，因此 .change 的 color 屬性仍為 red。

輸出 CSS

1.change {
2    color: red;
3}

使用 !global 標誌的情況下

讓我們在同一個範例中加上 !global 標誌。

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue !global; // Overwrite the global variable
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // blue
10}

• 在此情況下，因為有指定 !global 標誌，$color 的值會被更新到全域作用域。結果，.change 的 color 屬性就變成 blue。

輸出 CSS

1.change {
2    color: blue;
3}

使用注意事項

• 全域作用域污染 過度使用 !global 標誌可能會導致非預期的作用域衝突與全域作用域污染。這一點在大型專案中特別重要，應避免過度使用這個標誌。

• 未預期的值覆蓋 使用 !global 標誌時，具有相同名稱的變數可能會在其他地方被意外覆蓋。因此，必須對變數進行一致且清晰的命名。

實用範例

以下是正確使用 !global 標誌的範例。

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4@mixin set-theme($primary, $secondary) {
 5    $primary-color: $primary !global;
 6    $secondary-color: $secondary !global;
 7}
 8
 9.light-theme {
10    @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14    @include set-theme(#333333, #666666);
15}
16
17body {
18    background-color: $primary-color;
19    color: $secondary-color;
20}

• 在這段程式碼中，可以透過 set-theme mixin 動態切換主題。由於每個主題都會更新全域變數，因此可以靈活管理多個主題。

輸出 CSS

1body {
2    background-color: #333333;
3    color: #666666;
4}

常見錯誤與對策

忘記加上標誌

如果忘記加上 !global，變數可能無法在預期的範圍內被更新。必要時請務必明確加上標誌。

1@mixin update-color() {
2    $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6    $color: green !global; // Overwrite the global variable
7}

過度依賴全域範圍

過度依賴 !global 標誌會讓程式碼的除錯與維護變得困難。應將其使用降到最低。

總結

SASS 中的 !global 標誌在特定情境下非常有用，但應謹慎使用。只要明確瞭解變數的範圍並妥善管理全域範圍，即可撰寫具高度可維護性的 SASS 程式碼。

以下是需要注意的重點：。

1. 變數預設依賴於它們的作用範圍。

2. !global 標誌允許你在全域範圍內更新變數。

3. 盡量減少標誌的使用，並避免產生未預期的覆蓋。

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

YouTube Video