CSS Nesting
不用 SCSS 後的好處與壞處
好處:
專案不用再關心 scss 版本問題、package.json 問題,減少依賴。
開發時不用再多等 CSS 預處理器,因為現在變成給瀏覽器解析。
壞處:
目前原生 CSS 仍然沒有辦法有判斷跟迴圈等進階功能。
基礎寫法
原生 CSS 巢狀寫法目前有兩種,跟 SCSS 很類似,例如 Mozilla 提供的範例:
加不加 & 看團隊,我個人是盡量少加一些奇怪的符號,但 Mozilla 給了加 & 三個優點:
方便加偽元素
向後相容
視覺化:看到 & 就知道是子元素
選擇同級的 DOM
選擇加在自身上的 classname
選擇有上一層的 classname
媒體選擇器等其他 @ 開頭的選擇器
注意,因為 @media 或是 @container 裡,不能使用 CSS Variables,所以必須先行規定 Breakpoint。
Last updated