CSS Nesting

不用 SCSS 後的好處與壞處

好處：

• 專案不用再關心 scss 版本問題、package.json 問題，減少依賴。

• 開發時不用再多等 CSS 預處理器，因為現在變成給瀏覽器解析。

壞處：

• 目前原生 CSS 仍然沒有辦法有判斷跟迴圈等進階功能。

基礎寫法

原生 CSS 巢狀寫法目前有兩種，跟 SCSS 很類似，例如 Mozilla 提供的範例：

/* 第一種 */
parent {
    child {
    }
}

/* 第二種 */
parent {
    & child {
    }
}

/* 兩種寫法最後都會解析成 */
parent {}
parent child {}

加不加 & 看團隊，我個人是盡量少加一些奇怪的符號，但 Mozilla 給了加 & 三個優點：

• 方便加偽元素

• 向後相容

• 視覺化：看到 & 就知道是子元素

選擇同級的 DOM

h2 {
  color: tomato;
  + p {
    color: white;
  }
}
/* 同上一節，也可以寫成以下 */
/* 
h2 {
  color: tomato;
  & + p {
    color: white;
  }
}
*/

選擇加在自身上的 classname

h2 {
  color: tomato;
 &.green {
    color: green;
  }
}

選擇有上一層的 classname

.foo {
  /* .foo styles */
  .bar & {
    /* .bar .foo styles */
  }
}

媒體選擇器等其他 @ 開頭的選擇器

.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
    @media (min-width: 1024px) {
      max-inline-size: 1024px;
    }
  }
}

注意，因為 @media 或是 @container 裡，不能使用 CSS Variables，所以必須先行規定 Breakpoint。