:is() 跟 :where() 是什麼？
常常在一些情況之下，css selector有可能會需要寫很長，尤其是剛開始在寫sass, scss時，巢狀寫的很開心，結果compile出來的東西有可能會像下面這樣：
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container .class1 article, | |
| .container .class2 article, | |
| .container .class3 article, | |
| .container .class4 article { | |
| color: #f00; | |
| } |
而 :is() 跟 :where() 就是用來解決這個問題。在is:() or :where() 中可以帶入逗點分格的selector，讓原本多行且重複的結構簡化為一行：
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container :is(.class1, .class2, .class3, .class4) article { | |
| color: #f00; | |
| } | |
| /* or */ | |
| .container :where(.class1, .class2, .class3, .class4) article { | |
| color: #f00; | |
| } |
:is() 跟 :where() 的不同
基本上是完全一樣，唯一的差異是 :where() 的權重是0，因此可以被輕易複寫。