ruby-on-rails - Sass:处理每个样式表限制的 IE 4095 选择器

Question

注意:此问题涉及使用 Sass 和 Compass 的 Rails 元素。 使用 Rails Assets 管道？那就看看this question .

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

在我们应用程序的最新部分中，我们打破了 Internet Explorer 每个样式表 4095 个选择器的限制。 (想要证明此限制？http://marc.baffl.co.uk/browser_bugs/css-selector-limit/)

好的。那么，为什么我们不简单地将应用样式表设计成多个呢？

好吧，mixins 和选择器继承不能跨多个 Sass 文件(不是 partials)，对吧？

我会说样式表的质量相当不错，我们无法优化掉过多的选择器。 (还有更多。) 我也认为最小化选择器的数量不应该是我们的主要优化目标。 Sass 核心团队建议在适用的情况下使用选择器继承而不是混合，以节省 CSS 文件大小。通过这样做，选择器的数量往往会增加。

那我该怎么办呢？

我正在考虑编写一个脚本来生成额外的 css 文件，对我的大 application.css 文件进行分区。这些只会在 IE 中加载(这样我就不会在现代浏览器中有多个请求)。 我需要一个简单的 css 解析器，以便在最大之后剪切 application.css 文件。 4095 个选择器处于有效位置。 而且我需要一个 compass compile - after hook 这样开发人员就不需要手动生成 IE 文件来测试它。

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

最好的， 基督徒

Answer 1

Mixins 可用于多个文件。但是，@extend 可以处理多个文件在逻辑上是不可能的。该指令的目的是产生一个单一的规则 (不应在多个文件中重复)。因此，我无法拆分文件。

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

在 these 之后two提交已经进入 Sass 和 Compass，您可以在 Rails config/compass.rb 中使用以下钩子(Hook)来自动为 IE 创建额外的样式表:

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

更新:

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