Sass

Foundation 使用 Sass 编写，这使得代码库可定制且灵活。

不熟悉 Sass？ sass-lang.com 上的[官方教程](https://sass-lang.com.cn/guide)是一个很好的入门选择。

兼容性

网站基础可以使用 Ruby Sass 和 libsass 进行编译。 我们倾向于尽可能使用这两个编译器的最新版本。我们的文档和入门项目使用 node-sass（libsass 的 Node 端口）进行编译。我们推荐使用以下版本的任一编译器

Ruby Sass 3.4+
node-sass 3.4.2+ (libsass 3.3.2)

需要 Autoprefixer

我们的 Sass 文件中不包含供应商前缀，而是让 Autoprefixer 为我们处理。我们的构建过程使用 gulp-autoprefixer，但也有其他版本可以与 Grunt、Rails、Brunch 等一起使用。

要获得适当的浏览器支持，请使用以下 Autoprefixer 设置

autoprefixer({
  browsers: ['last 2 versions', 'ie >= 9', 'android >= 4.4', 'ios >= 7']
});

加载框架

如果您使用 CLI 创建项目，则 Sass 编译过程已经为您设置好了。如果没有，您可以自己编译我们的 Sass 文件，或者直接使用预先构建的 CSS 文件。

首先，使用您喜欢的包管理器（如 npm 或 yarn）安装框架文件。

npm install foundation-sites --save

手动编译

接下来，将框架文件添加为导入路径。如何执行此操作取决于您的构建过程，但路径是相同的：packages_folder/foundation-sites/scss

以下是如何使用 grunt-contrib-sass 的示例

grunt.initConfig({
  sass: {
    dist: {
      options: {
        loadPath: ['node_modules/foundation-sites/scss']
      }
    }
  }
});

如果您使用的是 Compass，请打开项目的 config.rb 文件并在那里添加导入路径

add_import_path "node_modules/foundation-sites/scss"

最后，在主 Sass 文件的顶部添加一个 @import 语句。请参阅下面的调整 CSS 输出，了解如何控制框架的 CSS 输出。

@import 'foundation';

您还需要为您的项目准备一个设置文件，以便修改 Foundation 的默认样式。 在此处下载最新的设置文件，将其作为 _settings.scss 添加到您的项目中，然后在 Foundation 本身之前导入它。

设置文件需要从 Foundation 导入 `util/util`。请确保 Sass 中包含 Foundation 文件夹，或者更改 `@import util/util` 以使其指向文件的完整路径。例如，NPM 用户可能需要将导入更改为 `node_modules/foundation-sites/scss/util/util`。

@import 'settings';
@import 'foundation';

使用已编译的 CSS

网站基础 npm 包包含预先编译的 CSS 文件，分为压缩版和未压缩版。如果您想直接编辑框架 CSS，请使用未压缩的文件。对于生产环境，请使用压缩版本。

<link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation-sites.css">

<link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation-sites.min.css">

调整 CSS 输出

Foundation 为其各种组件输出了许多类。这些类可以帮助开发人员快速启动和运行。但是，当您进入生产环境时，您可能希望以语义方式构建网格，用您自己的类替换我们预先构建的类，或者完全删除组件。

每个组件都有一个导出混合，它会打印出该组件的 CSS。如果你想保留所有内容，你只需要一行代码

@include foundation-everything;

我们的入门项目包含完整的导入列表，可以轻松注释掉不需要的组件。下面还提供了一个完整列表。

@import 'foundation';

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
// @include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;

设置文件

所有 Foundation 项目都包含一个名为 _settings.scss 的设置文件。如果您使用 CLI 创建网站基础项目，则可以在 scss/（基本模板）或 src/assets/scss/（ZURB 模板）下找到设置文件。如果您使用 npm 单独安装框架，则此包中包含一个设置文件，您可以将其移动到自己的 Sass 文件中使用。

每个组件都包含一组变量，用于修改核心结构或视觉样式。如果您无法使用变量自定义某些内容，则可以编写自己的 CSS 来添加它。

设置新项目后，当新版本更改、添加或删除变量时，将无法自动更新您的设置文件。请密切关注新的Foundation 版本，以便您了解何时发生变化。

以下是一组设置变量的示例。这些变量会更改按钮的默认样式

// Default padding for button.
$button-padding: 0.85em 1em !default;

// Default margin for button.
$button-margin: 0 $global-padding $global-padding 0 !default;

// Default fill for button. Is either solid or hollow.
$button-fill: solid !default;

// Default background color for button.
$button-background: $primary-color !default;

// Default hover background color for button.
$button-background-hover: scale-color($button-background, $lightness: -15%) !default;

// Default font color for button.
$button-font-color: #fff !default;

// Default alternative font color for button.
$button-font-color-alt: #000 !default;

// Default radius for button.
$button-radius: 0 !default;

// Default sizes for button.
$button-sizes: (
  tiny: 0.7,
  small: 0.8,
  medium: 1,
  large: 1.3,
) !default;

// Default font size for button.
$button-font-size: 0.9rem !default;

// Default opacity for a disabled button.
$button-opacity-disabled: 0.25 !default;