Sass:根据样式表限制处理IE 4095选择器

注意:此问题涉及使用Sass&Compass的Rails项目。 使用Rails资产管道? 然后看看这个问题 。

我们正在开发一个包含许多用例和许多单独样式页面的大型应用程序,部分用于多个上下文。 这仅仅意味着很多风格信息。

使用我们应用程序的最新部分,我们已经破坏了Internet Explorer每个样式表4095个选择器的限制。 (想要certificate这个限制吗? http://marc.baffl.co.uk/browser_bugs/css-selector-limit/ )

好的。 那么,为什么我们不能简单地将应用程序样式表分成多个设计呢?

好吧,mixins和selectorinheritance不能用于多个Sass文件(不是部分),对吧?

我会说样式表的质量相当不错,我们无法优化掉选择器的数量。 (还有更多的事情要发生。)我还认为,尽量减少选择器的数量不应该是我们的主要优化目标。 Sass核心团队建议在适用的情况下使用选择器inheritance而不是mixins来保存CSS文件大小。 通过这样做,选择器的数量趋于增长。

所以我该怎么做?

我正在考虑编写一个生成额外css文件的脚本,对我的大application.css文件进行分区。 这些只会在IE中加载(因此我在现代浏览器中没有多个请求)。 我需要一个简单的css解析器,以便在max之后剪切application.css文件。 4095个选择器位于有效位置。 我需要一个指南针编译 – 挂钩后,开发人员不需要手动生成IE文件,以便测试它。

请告诉我,你有更好的主意!

最好的,基督徒

Mixins可用于多个文件。 但是,@extend在逻辑上不可能使用多个文件。 该指令的目的是产生单个规则(不应跨多个文件复制)。 因此,我无法拆分文件。

因此,我实现了一个拆分器: https : //gist.github.com/1131536

在这 两个提交进入Sass和Compass后,您可以在Rails config/compass.rb中使用以下钩子,以便自动为IE创建其他样式表:

 on_stylesheet_saved do |filename| if File.exists?(filename) CssSplitter.split(filename) end end 

更新:

上面提到的CssSplitter已作为gem发布: https : //github.com/zweilove/css_splitter

如果无法减少选择器的数量,除了拆分CSS文件之外别无选择。

如果实施起来有点复杂,那么您提出的这样做的解决方案已经听起来是最佳的

一个简单的方法是http://blesscss.com/ 。 简单地说

  • 安装node.js
  • 执行npm install bless -g
  • blessc source.css output.css