用SCSS須要當心IE對css的幾個限制

IE對CSS的限制主要有兩個：

1. 一個頁面中引用的CSS只讀前32個
2. 一個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完全地分離開來。