↓ 今日學習重點 ↓
了解如何使用原生 CSS 巢狀 (CSS Nesting)
了解原生 CSS 巢狀的限制 (與 SCSS 比較)
以往 CSS 要使用巢狀管理要透過 Sass (SCSS) 或 Less 等預處理器才能實現，現在原生的 CSS 巢狀也可以使用了。前陣子在 Firefox 117 終於支援後，全部最新的瀏覽器都已支援了，可以逐漸開始使用它囉！不過如果 TA 有使用較舊的瀏覽器的話，要斟酌使用。
基本寫法
就像 Sass (SCSS) 一樣，使用縮排代表下一層。
.content{
p { ... } /* .content p */
.child { ... } /* .content .child */
> .child { ... } /* .content > .child */
+ .content { ... } /* .content + .content */
~ .content { ... } /* .content ~ .content */
@media(max-width: 768px) { ... }
}
& 代表上一層爸爸
當 & 出現在巢狀內部，它代表上一層的爸爸。使用偽類、偽元素時需要在前方添加 &。
.content{
/* 偽類、偽元素 */
&.active { ... }
&:hover { ... }
&:has(.btn-delete:hover) { ... }
&:before { ... }
/* .content 和 .content 內的 p 使用一樣樣式 */
&, & p {
...
span ｛ ... ｝
}
}
/* 等同於：
.content.active { ... }
.content:hover { ... }
.content:has(.btn-delete:hover) { ... }
.content:before { ... }
.content, .content p { ... }
.content, .content p span { ... }
*/
有了 & 可以突破巢狀限制
這個 & 居然可以突破巢狀限制，可以將父層寫進來裡面，設定當自己在某個父層內時會有什麼樣式。雖然稍微有點反直覺（因為通常巢狀結構只能往子層內部寫），但這樣寫的話，等於說有關這個標籤的所有資訊，就可以全部寫在一起管理。
設定在不同容器內的情況
p {
background-color: white;
/* 只有當 p 在 .content 內的時候，p 的背景色才會是黃色 */
.content & {
background-color: yellow;
}
/* 只有當 p 在 article 內且 id 是 #post-00 的時候，p 的背景色才會是藍色 */
article#post-00 & {
background-color: blue;
}
}
/*以往要達到這個效果，必須要這樣寫：
p {
background-color: white;
}
.content p {
background-color: yellow;
}
article#post-00 p {
background-color: blue;
}
但這樣，關於 p 的設定就會散落在多個地方。 */
簡寫重複自己名字的部分
有了這個功能，我們可以進一步簡寫重複自己名字的部分。
以這個例子來說是修復因自己重疊而造成的問題：
.semi-dark {
/* 背景色為黑色的 0.2 透明度 */
background-color: rgba(0,0,0, .2);
/* 如果 .semi-dark 在 .semi-dark 中，背景色為透明 */
& & {
background-color: transparent;
}
}
/* 以往要達到這個效果，要這樣寫：
.semi-dark {
background-color: rgba(0,0,0, .2);
.semi-dark {
background-color: transparent;
}
}
不過這只是簡寫，所以看個人喜好囉！ */
Sass (SCSS) 才能做得到的事
.card {
...
&-body {
...
&-title { ... }
}
}
// SCSS 可以透過這個方式設定 .card、.card-body 和 .card-body-title Class
// 但原生 CSS 巢狀做不到以上
除此之外，Sass (SCSS) 還有其他功能，如：mixin、if、each、map 等等功能，暫時還是不會被原生 CSS 取代。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
感謝看到最後的你，若你覺得獲益良多，請不要吝嗇給我按個喜歡。❤️
如果你喜歡我的創作，還想看看其他有趣的分享與日常，
可以追蹤我的 IG @im1010ioio，或者是🧋送杯珍奶鼓勵我，謝謝你🥰。
