在 SCSS 中，巢狀規則（Nesting）是讓 CSS 語法更加結構化的一個重要特性。巢狀語法允許開發者根據 HTML 的層次結構，將相關的樣式規則寫在一起，而不是像傳統 CSS 那樣將規則分散在不同位置。這不僅使程式碼更具可讀性，還能提高開發效率。

一、巢狀語法的使用

在 SCSS 中，巢狀語法的基本概念是將一個選擇器放在另一個選擇器之內，從而明確表達層次關係。以下是一個簡單的範例：

//好多{}喔哈哈哈
.navbar {
  background-color: #333;
  padding: 10px;

  .menu {
    list-style: none;
    display: flex;

    .menu-item {
      margin-right: 20px;

      a {
        color: white;
        text-decoration: none;

        &:hover {
          color: #ff6347;
        }
      }
    }
  }
}

由上面的程式碼可以發現.menu 和 .menu-item 都是 .navbar 的子元素，並且 a 元素和它的 :hover 狀態也嵌套在 .menu-item 裡。這種結構讓樣式層次更明顯、直觀。
(&:為父選擇器的應用,明天會介紹此內容)

二、如何讓CSS更加有組織性

巢狀語法可以大幅改善 CSS 的組織性，因為它遵循了 HTML 的結構。這樣的方式能夠：

1.減少冗長的選擇器：

在傳統 CSS 中，可能需要寫類似 .navbar .menu .menu-item a 這樣的選擇器，但在 SCSS 的巢狀語法中，我們可以透過縮排來表達這些層級，讓程式碼簡潔且更容易閱讀。

2.清楚的上下文關係：

巢狀語法能清楚地表示出元素之間的關係，減少樣式間的混淆。

總結來說，巢狀規則使得開發者能以更接近 HTML 結構的方式編寫樣式，提高了 CSS 的可維護性和可讀性。
今天的內容絕對沒有划水..