用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完全地分离开来。