Split stylesheet to avoid IE9 limit of 4095 css selectors per file?

#1

Hello, I’m using Middleman to build a Zurb Foundation project. Running into an issue where there are more than 4095 css selectors in the generated css file, which IE9 does not like. This gist has a Sass csssplitter confg.rb solution that relies on on_stylesheet_saved event, but does not seem to be working with Middleman build process.

Basically, I need to break up the main generated css file into two files. But because Foundation needs mixins and variables throughout all the files, breaking it up is proving difficult.

Thanks for any advice/direction/info!

#2

Hi,

I am also using Foundation and Middleman, but I would tackle your problem in a different way. As you know, Foundation is broken down into modules (.scss and .js). I assume, that your website does not require all the modules, so just switch off the ones that you do not need. This is also good for faster loading and less traffic.

For instance, my foundation.scss-file in one of the recent projects looked like:

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

// Make sure the charset is set appropriately
@charset "UTF-8";

// Behold, here are all the Foundation components.
@import
  "foundation/components/grid",
//  "foundation/components/accordion",
//  "foundation/components/alert-boxes",
  "foundation/components/block-grid",
//  "foundation/components/breadcrumbs",
//  "foundation/components/button-groups",
  "foundation/components/buttons",
//  "foundation/components/clearing",
//  "foundation/components/dropdown",
//  "foundation/components/dropdown-buttons",
//  "foundation/components/flex-video",
  "foundation/components/forms",
  "foundation/components/inline-lists",
//  "foundation/components/joyride",
//  "foundation/components/keystrokes",
  "foundation/components/labels",
//  "foundation/components/magellan",
//  "foundation/components/orbit",
//  "foundation/components/pagination",
  "foundation/components/panels",
//  "foundation/components/pricing-tables",
//  "foundation/components/progress-bars",
//  "foundation/components/range-slider",
  "foundation/components/reveal",
//  "foundation/components/side-nav",
//  "foundation/components/split-buttons",
//  "foundation/components/sub-nav",
//  "foundation/components/switch",
//  "foundation/components/tables",
//  "foundation/components/tabs",
  "foundation/components/thumbs",
  "foundation/components/tooltips",
  "foundation/components/top-bar",
  "foundation/components/type",
//  "foundation/components/offcanvas",
  "foundation/components/visibility";

Hope that helps. Otherwise let me know.