Error when disabling some of foundations css / javascripts

Question

I'm trying to disable some of foundation's CSS files, because I don't need them.

I've installed foundation through a gem, so the correct way to do this (by Ryan Bates) is by replacing import foundation in foundation_and_overrides.scss file to this, with the files you only want.

@import
  "foundation/components/grid",
  "foundation/components/alert-boxes",
  "foundation/components/block-grid",
  "foundation/components/buttons",
  "foundation/components/dropdown",
  "foundation/components/dropdown-buttons",
  "foundation/components/forms",
  "foundation/components/inline-lists",
  "foundation/components/joyride",
  "foundation/components/labels",
  "foundation/components/orbit",
  "foundation/components/panels",
  "foundation/components/reveal",
  "foundation/components/tooltips",
  "foundation/components/top-bar";  

The problem is, I get the following error:

Undefined variable: "$include-html-classes".

Has someone disabled css/js from foundation with success?

Thanks!

Update

This is how my foundation_and_overrides.scss looks:

$include-html-classes: true;
$include-print-styles: true;
$include-html-global-classes: $include-html-classes;
$include-html-inline-list-classes: $include-html-classes;
$include-html-type-classes: $include-html-classes;
$include-html-grid-classes: $include-html-classes;
$include-html-visibility-classes: $include-html-classes;
$include-html-button-classes: $include-html-classes;
$include-html-form-classes: $include-html-classes;
$include-html-custom-form-classes: $include-html-classes;
$include-html-media-classes: $include-html-classes;
$include-html-section-classes: $include-html-classes;
$include-html-orbit-classes: $include-html-classes;
$include-html-reveal-classes: $include-html-classes;
$include-html-joyride-classes: $include-html-classes;
$include-html-clearing-classes: $include-html-classes;
$include-html-alert-classes: $include-html-classes;
$include-html-nav-classes: $include-html-classes;
$include-html-top-bar-classes: $include-html-classes;
$include-html-label-classes: $include-html-classes;
$include-html-panel-classes: $include-html-classes;
$include-html-pricing-classes: $include-html-classes;
$include-html-progress-classes: $include-html-classes;
$include-html-magellan-classes: $include-html-classes;
$include-html-tooltip-classes: $include-html-classes;

@import "foundation/variables";   

@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/icon-bar",
  "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/switches",
  "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";

This will give the error:

Undefined variable: "$opposite-direction".

Answer 1

Import the _settings.scss file prior to importing the Foundation components. Below is a sample file.

//
// Custom Settings
//
@import "foundation/settings";


// 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";