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

Question

IE 8 and lower has a limit to the number of selectors allowed in a single style sheet and once the limit is reached the style sheet needs to be split. Apparently someone addressed this in Compass by creating a way to have Compass do this automatically, and created a gist about it. I however don't have the skills to know what the next step is and there is little in the way of documentation on what to do with this code. Can anyone help with how to integrate this into my Compass install?

Ref: https://gist.github.com/1131536

Thanks much!

Answer 1

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.

Answer 2

For what it's worth, there is a Node.js app called Bless that will provide you this functionality. It can run server side or on your local machine.

If you happen to be using CodeKit to compile your Sass/Compass files, it's baked in, you just have to enable it in project settings.