SCSS使用變數

當我們在設計網站時，需要使用具有一致性和可重用性的顏色、字體和尺寸。 SCSS 的變數使我們能夠輕鬆地維護這些樣式和屬性的值。在這篇文章中，我們將探討 SCSS 使用變數的多個方面和特性。

一、定義變數

使用 SCSS 定義變數，我們只需要在某個選擇器前加上 $ 符號，如下所示：

$primary-color: #333;

.text {
  color: $primary-color;
}

在上面的例子中，我們定義了一個名為 $primary-color 的變數。然後我們在 .text 選擇器中使用這個變數。這樣，在我們需要改變主色調時，只需要改變變數的值，整個網站的主色調也會隨之改變。

二、嵌套變數

在 SCSS 中，我們還可以嵌套使用變數，如下所示：

$primary-color: #333;
$background-color: lighten($primary-color, 20%);

.text {
  color: $primary-color;
  background-color: $background-color;
}

在上面的例子中，我們定義了兩個變數，其中 $background-color 使用了 lighten 函數。然後我們在 .text 選擇器中使用了這兩個變數。在編譯成 CSS 後，$background-color 的值將被解析為 $primary-color 變數的值加上 lighten 函數處理後的值。

三、全局變數

有時候我們可能需要在嵌套選擇器之外定義全局變數。這些變數可以在整個樣式表中使用，而不僅僅是在特定的選擇器內部。我們可以使用 !global 標記來定義全局變數，如下所示：

$primary-color: #333;

:root {
  --primary-color: $primary-color !global;
}

.text {
  color: var(--primary-color);
}

在上面的例子中，我們在 :root 選擇器中定義了一個名為 –primary-color 的全局變數。在 .text 選擇器中，我們使用了這個全局變數。這表示我們可以在整個樣式表中使用 –primary-color 變數。

四、默認變數

有時候，我們可能希望變數具有默認值。這樣，如果沒有值傳遞到變數，它將使用默認值。我們可以使用 !default 標記來定義默認變數，如下所示：

$primary-color: #333 !default;

.text {
  color: $primary-color;
}

在上面的例子中，我們定義了一個名為 $primary-color 的變數並賦予了一個默認值。如果在整個樣式表中沒有為 $primary-color 變數賦值，它將使用默認值。如果在樣式表的另一個位置重新定義了 $primary-color 變數，它將使用新值而不是默認值。

五、作用域

定義變數的作用域取決於變數定義的位置。在 SCSS 中，以下內容適用：

• 在選擇器內部定義的變數只在該選擇器內部可用。
• 在嵌套選擇器中定義的變數只在該選擇器內部和它的父級選擇器內部可用。
• 在頂級作用域內定義的變數在整個樣式表中可用。

例如：

.text {
  $primary-color: #333;
  color: $primary-color;
}

.container {
  .text {
    $background-color: #fff;
    background-color: $background-color;
    color: $primary-color; // 這裡的 $primary-color 可以使用
  }
}

.other-text {
  color: $primary-color; // 這裡的 $primary-color 無法使用
}

在上面的例子中，.text 選擇器定義了 $primary-color 變數，因此只有在 .text 選擇器內部才能使用它。然而，在 .container .text 選擇器內部定義的 $background-color 變數可以從 .container 選擇器中訪問。在 .other-text 選擇器內部，$primary-color 變數未定義，因此無法使用。

六、結論

在 SCSS 中，使用變數可以使我們輕鬆地維護具有一致性和可重用性的樣式和屬性值。在本文中，我們了解了如何定義變數、嵌套變數、全局變數、默認變數和變數的作用域。希望這篇文章對於你使用 SCSS 變數有一定幫助。