Sass: Dealing with The Ie 4095 Selectors Per Stylesheet Restriction

Sass: Dealing with the IE 4095 selectors per stylesheet restriction

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.

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

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

Update:

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

Rails asset pipeline solution for IE 4096 selector/stylesheet limit

We have an automated (albeit somehow awkward) solution working in production for a Rails 3.1 app with asset pipeline in place. Ryan already referenced the solution in his question but I try to come up with a more comprehensive answer.

The asset pipeline pipes an asset through different Sprocket engines.

So you might have e.g. a ie.css.sass.erb that runs through the ERB Sprocket engine and then passed to the Sass Sprocket engine etc. But it is always one file in and one file out.

In this special problem, we would like to have 1 inbound file and n outbound files.
We have not found a way to make this possible with sprockets. But we found a workaround:

Provide an ie.css.sass that includes the complete stylesheet and a ie_portion2.css.sass.split2 that just imports the complete ie.css file:

//= include 'ie.css'

For the split2 file extension, we register a Sprockets Engine:

require 'css_splitter'
Rails.application.assets.register_engine '.split2', CssSplitter::SprocketsEngine

When evaluating assets with the split2 extension, we pass its content to the CssSplitter and instruct it to extract the part 2 (> 4095 selectors):

require 'tilt'
module CssSplitter

  class SprocketsEngine < Tilt::Template
    def self.engine_initialized?
      true
    end

    def prepare
    end

    def evaluate(scope, locals, &block)
      part = scope.pathname.extname =~ /(\d+)$/ && $1 || 0
      CssSplitter.split_string data, part.to_i
    end
  end
end

This would also work for further parts (split3, ...).

The CSS Splitter recognizes valid places where stylesheets can be split into parts with less than 4096 selectors and returns the requested part.

The result is a ie_portion2.css which you have to link in the head and precompile separately.

I hope my revised CSS Splitter Gist is complete enough to employ the solution.

Update:

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

How to install compass code to split style sheets for IE selector limit

Create css_spliter.rb file (as described in your Ref) beside your config.rb file, at the root of your sass project.

Add the following line at the beginning of your config.rb file

require 'css_splitter'

And add the 3 following lines at the end (of config.rb)

on_stylesheet_saved do |path|
  CssSplitter.split(path) unless path[/\d+$/]
end 

Then run compass compile as you usually do. You won't see the files *myFile_2.css*, *myFile_3.css*, ... appear in the logs but they are well created in your css folder. Also the command compass clean won't remove them, you'll have to dele them manually from your css/ folder.

use @at-root and & in list of selectors

The @at-root directive cannot be used this way. It is intended to be applied the complete selector, not an individual selector in the list. Since your selectors are both classes, you can just reposition your parent selector to the beginning rather than try to append it to the end:

.btn-primary {
    &:hover,
    &:focus,
    &:active,
    &.active,
    .open &.dropdown-toggle {
      color: red;
    }
}

Output:

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .btn-primary.dropdown-toggle {
  color: red;
}

If it absolutely must be at the end (eg. you're using an element or pseudo selector), the simplest solution is to just use extends:

%common {
    color: red;
}

.btn-primary {
    &:hover,
    &:focus,
    &:active,
    &.active {
        @extend %common;
    }

    @at-root .open .dropdown-toggle#{&} {
        @extend %common;
    }
}

Output:

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
  color: red;
}

What's the size limit of css file for Internet Explorer?

Maximum number of possible selectors in a CSS file - 4095

http://demos.telerik.com/testcases/4095issues.html

31 stylesheets per file

http://demos.telerik.com/testcases/BrokenTheme.aspx

Compiling Sass with custom variables per request under Rails 3.1

Sim.

It is possible. Look here SASS: Set variable at compile time

I wrote a solution to address it, I'll post soon and push it here, in case you or someone else still need it.

---

Related Topics