Created
November 18, 2013 02:11
-
-
Save ethanhinson/7521333 to your computer and use it in GitHub Desktop.
IE 9 and below doesn't support more than 4095 individual selectors. SCSS can blow through this pretty easily. To get around it. We can implement a simple class in our config.rb file and implement a save hook to write the additional styles. These should be included with an IE conditional.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Requre a specific version in this file: | |
# gem 'zurb-foundation', '=4.3.1' | |
require 'zurb-foundation' | |
# Require any additional compass plugins here. | |
# IE 9 and below only support up to 4095 CSS selectors | |
# This class will split all selectors after that point | |
class CssSplitter | |
def self.split(infile, outdir = File.dirname(infile), max_selectors = 4095) | |
raise "infile could not be found" unless File.exists? infile | |
rules = IO.readlines(infile, "}") | |
return if rules.first.nil? | |
charset_statement, rules[0] = rules.first.partition(/^\@charset[^;]+;/)[1,2] | |
return if rules.nil? | |
# The infile remains the first file | |
file_id = 1 | |
selectors_count = 0 | |
output = nil | |
rules.each do |rule| | |
rule_selectors_count = count_selectors_of_rule rule | |
selectors_count += rule_selectors_count | |
# Nothing happens until the selectors limit is reached for the first time | |
if selectors_count > max_selectors | |
# Close current file if there is already one | |
output.close if output | |
# Prepare next file | |
file_id += 1 | |
filename = File.join(outdir, File.basename(infile, File.extname(infile)) + "_#{file_id.to_s}" + File.extname(infile)) | |
output = File.new(filename, "w") | |
output.write charset_statement | |
# Reset count with current rule count | |
selectors_count = rule_selectors_count | |
end | |
output.write rule if output | |
end | |
end | |
def self.count_selectors(css_file) | |
raise "file could not be found" unless File.exists? css_file | |
rules = IO.readlines(css_file, '}') | |
return if rules.first.nil? | |
charset_statement, rules[0] = rules.first.partition(/^\@charset[^;]+;/)[1,2] | |
return if rules.first.nil? | |
rules.inject(0) {|count, rule| count + count_selectors_of_rule(rule)}.tap do |result| | |
puts File.basename(css_file) + " contains #{result} selectors." | |
end | |
end | |
def self.count_selectors_of_rule(rule) | |
rule.partition(/\{/).first.scan(/,/).count.to_i + 1 | |
end | |
end | |
# Set this to the root of your project when deployed: | |
http_path = "../" | |
css_dir = "css" | |
sass_dir = "scss" | |
images_dir = "images" | |
javascripts_dir = "js" | |
fonts_dir = "fonts" | |
# You can select your preferred output style here (can be overridden via the command line): | |
# output_style = :expanded or :nested or :compact or :compressed | |
output_style = :compact | |
# To enable relative paths to assets via compass helper functions. Uncomment: | |
# relative_assets = true | |
# To disable debugging comments that display the original location of your selectors. Uncomment: | |
# line_comments = false | |
line_comments = true | |
# If you prefer the indented syntax, you might want to regenerate this | |
# project again passing --syntax sass, or you can uncomment this: | |
# preferred_syntax = :sass | |
# and then run: | |
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass | |
# On save, write a new stylesheet | |
on_stylesheet_saved do |path| | |
CssSplitter.split(path) unless path[/\d+$/] | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment