用SCSS需要小心IE對css的幾個限制
阿新 • • 發佈：2019-01-22
IE對CSS的限制主要有兩個：
- 一個頁面中引用的CSS只讀前32個
- 一個CSS檔案中只讀前4095個選擇器
關於這個問題的文章有很多，我就不細講了。
我想講的是在用SCSS寫CSS的時候非常容易超過這第二個限制。SCSS的繼承，MIXIN和其他特性非常好用，我們可能會分成很多個檔案，這些檔案都互相有關聯，但是為了減少瀏覽器請求檔案次數，通常會將多個檔案合併壓縮成一個檔案。那麼如果碰到一個樣式量大的站點，你可能不得不為了相容IE而將CSS分成兩個以上的檔案。
非常蛋疼的是，我在使用Foundation的時候碰到了這件事情。因為Foundation 已經預先提供了非常豐富的樣式，我在增加新檔案用自定義樣式覆蓋原樣式時發現IE下出現了很奇怪的bug，最終發現IE只讀出來了一部分的CSS。
Foundation是一個非常不錯的Responsive的框架，但是顯然作者們沒有考慮到IE的限制問題，他們將mixin和CSS混合在一個檔案中，如果在寫自定義樣式的時候大量引用了這些Foundation提供的mixin，那麼就會在分css檔案的時候非常頭疼。如果不希望自己的CSS分得雜亂無章，或者兩個CSS檔案中出現同一段樣式，那麼顯然得好好考慮一下怎麼做。
我的專案是在後期的時候發現這個問題的。於是我糾結了很久，最終決定將foundation得所有SCSS壓縮成一個檔案，自定義得樣式壓縮成另外一個檔案。而在自定義樣式中再次引用了變數檔案和_global.scss，所使用的Mixin除了在Global檔案中的，則都拷貝出來使用。這可能是最迅速的一個解決方法。
希望Foundation的下一個版本會將Mixin和CSS徹底地分離開來。