禁用某些基础 css / javascripts 时出错

Question

我正在尝试禁用一些基金会的 CSS 文件，因为我不需要它们。

我已经通过 gem 安装了基础，因此执行此操作的正确方法（由 Ryan Bates 编写）是将foundation_and_overrides.scss 文件中的import foundation 替换为您只需要的文件。

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

问题是，我收到以下错误：

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

是否有人成功禁用了基金会的 css/js？

谢谢！

更新

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

这会报错：

Undefined variable: "$opposite-direction".

Answer 1

在导入 Foundation 组件之前导入 _settings.scss 文件。下面是一个示例文件。

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