前言
雖然說這已經不是什麼新聞了,但近期看到號稱為現代 IE 的 Safari 也終於在預覽版加入 Nesting CSS 的支援,可能真的離不用預處理器的日子不遠了。
但真的不需要 SCSS 處理器了嗎?
Nesting CSS VS SCSS
相似處
Nesting CSS 是一種 CSS 語法,可以讓開發者在撰寫 CSS 時,可以像是 SCSS 一樣使用巢狀結構,加快開發速度,並且不需要額外的處理器。
以往是這樣寫:
.container {
width: 100%;
height: 100%;
background-color: #fff;
}
.container .title {
font-size: 24px;
color: #000;
}
現在可以這樣寫,基本上和 SCSS 一樣:
.container {
width: 100%;
height: 100%;
background-color: #fff;
.title {
font-size: 24px;
color: #000;
}
}
也有著 &
的使用方法
.container {
width: 100%;
height: 100%;
background-color: #fff;
&.active {
background-color: #000;
}
}
差異處
但是 Nesting CSS 和 SCSS 也有著不同的地方,例如在使用 &
時,SCSS 可以對字串做串聯,但 Nesting CSS 則不行
.container {
width: 100%;
height: 100%;
background-color: #fff;
&-active {
background-color: #000;
}
}
.container-active {
background-color: #000;
}
而 Nesting CSS 無法對字串做串聯,這點就和 SCSS 有所不同。
結論
雖然 Nesting CSS 和 SCSS 有著相似的地方,但相較之下 SCSS 的功能還是強大許多,無論是關於 BEM 規則的開發,或者是有著 mixin extend 等功能,這些都是 Nesting CSS 所不具備的。
而且截至 2023年底 支援度上瀏覽器也還不夠完整
,所以在短期之內,還是沒辦法完全取代 SCSS 的地位。