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 變量有一定幫助。