Sass：处理每个样式表限制的IE 4095选择器 [英] Sass: Dealing with the IE 4095 selectors per stylesheet restriction

问题描述

注意：这个问题是指一个Rails项目，Sass&罗盘。
使用Rails资产管道？然后查看此问题

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

We are developing a big application with many use cases and many individually styled pages, partly for multiple contexts. Which simply means a lot of style information.

使用我们应用程序的最新部分，我们已经破坏了Internet Explorer对每个样式表的4095个选择器的限制。 （要证明此限制吗？ http://marc.baffl.co。 uk / browser_bugs / css-selector-limit / ）

With the newest section of our application, we have broken Internet Explorer's limit of 4095 selectors per stylesheet. (Want a proof of this limitation? http://marc.baffl.co.uk/browser_bugs/css-selector-limit/)

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

Okay. So, why do we not simply split the application style sheet into multiple ones by design?

好吧，mixins和选择器继承不会在多个Sass文件，对吗？

Well, mixins and selector inheritance will not work across multiple Sass files (not partials), right?

我会说样式表的质量是相当不错的，我们不能优化超过选择器的数量。 （还有更多的来。）
我还认为，最小化选择器的数量不应该是我们的主要优化目标。 Sass核心团队建议在适用的情况下使用选择器继承而不是mixins来保存CSS文件大小。通过这样做，选择器的数量趋于增长。

I'd say the quality of the stylesheets is rather good, we cannot optimize away the exceeding amount of selectors. (There is rather more to come.) I also believe that minimizing the amount of selectors should not be our primary optimization goal. The Sass core team advises to use selector inheritance instead of mixins where applicable in order to save CSS file size. By doing so, the number of selectors tends to grow though.

那么我该怎么办？

我考虑编写一个脚本生成额外的CSS文件，分区我的大application.css文件。这些只会加载在IE然后（所以我没有在现代浏览器中的多个请求）。
我需要一个简单的css解析器为了削减application.css文件后max。 4095选择器位于有效位置。
我需要一个指南针编译 - 挂钩后，开发人员不需要手动生成IE文件，以测试它。

I am thinking about writing a script that generates additional css files, partitioning my big application.css file. These would only be loaded in IE then (so that I don't have multiple requests in modern browsers). I would need a simple css parser for that in order to cut the application.css file after max. 4095 selectors at a valid position. And I would need an compass compile - after hook so that developers don't need to generate the IE files by hand in order to test it.

请，告诉我，你有了一个更好的主意！

Please, tell me, that you got a better idea!

Best，
Christian

Best, Christian

推荐答案

混合在多个文件中可用。但是，逻辑上不可能@extend可以与多个文件一起使用。这个指令的目的是产生单个规则
（不应该跨多个文件重复）。因此，我不能拆分文件。

Mixins are usable across multiple files. However, it is logically not possible that @extend may work with multiple files. It is the purpose of this directive to result in a single rule (which should not be duplicated across multiple files). Therefore, I cannot split up files.

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

Thus, I implemented a splitter: https://gist.github.com/1131536

这些 两个提交找到他们的方式到Sass和Compass，你可以使用Rails config / compass.rb 中的以下钩子为了自动创建IE的附加样式表：

After these two commits have found their way into Sass and Compass, you can use the following hook in your Rails config/compass.rb in order to automatically create the additional stylesheets for IE:

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

更新：

上述CssSplitter提及已发布为一个gem： https://github.com/zweilove/css_splitter

The CssSplitter mentionend above has been release as a gem: https://github.com/zweilove/css_splitter

这篇关于Sass：处理每个样式表限制的IE 4095选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！