HTML5 Boilerplate Compass扩展项目技术文档

1. 安装指南

两种安装方式：

• 使用gem安装：

  gem install compass-h5bp
  

• 如果您正在使用Bundler，可以在 Gemfile 中添加以下内容后使用 bundle install 安装：

  gem 'compass-h5bp'
  

2. 项目使用说明

首先，您需要将插件添加到您的 config.rb 文件中（您的Compass配置文件）。这可以通过在文件顶部添加一行导入语句来实现，以将 Compass 插件添加到 Sass 载入路径：

require 'compass-h5bp'

在您的 SCSS（或 Sass）文件中，您必须在使用任何 mixin 之前导入 h5bp compass 库：

@import "h5bp";

简单实现

1. 包含 h5bp mixin：

   @include h5bp;
   

2. 可选：重新定义 mixin h5bp-custom 以声明对 HTML5 Boilerplate 样式的自定义修改。

高级实现

为了有选择性地导入某些元素，请按照以下顺序操作。这将确保您对 HTML Boilerplate 样式的自定义修改按预期工作，按照上游 HTML5 Boilerplate CSS 提供的概要执行。

1. 包含构成 HTML5 Boilerplate 样式一部分的 Normalize mixin。您可以一次性包含所有 Normalize：

   @include h5bp-normalize;
   

   或者只拉入您想要的 Normalize 部分：

   @include normalize-base;
   @include normalize-display;
   @include normalize-links;
   @include normalize-semantics;
   @include normalize-embedded;
   @include normalize-grouping;
   @include normalize-forms;
   @include normalize-tables;
   

2. 包含默认的基本样式：

   @include h5bp-base-styles;
   

3. 可以包含浏览器升级警告的样式：

   @include h5bp-browserupgrade;
   

4. 为 404 页面提供样式（需要为 404 文档的 HTML 指定 errorpage 类）：

   @include h5bp-errorpage;
   

5. 在此处定义对 HTML5 Boilerplate 样式的自定义修改。

6. 让 h5bp 定义一些语义辅助类（例如 .clearfix）：

   @include h5bp-helpers;
   

   h5bp-helpers 中还提供了特定的 mixin，您可以调用它们。

7. 包含 h5bp 预定义的打印样式媒体查询：

   @include h5bp-media;
   

3. 项目API使用文档

该项目作为 Compass 的扩展，主要提供了一系列的 mixin 用于在 SCSS 或 Sass 文件中快速实现 HTML5 Boilerplate 的样式。具体使用方式请参考“项目使用说明”部分。

4. 项目安装方式

请参考“安装指南”部分，有两种安装方式可供选择：使用 gem 直接安装或者通过 Bundler 安装。

注意： 由于 Compass 已经被弃用，该项目也已不再维护。如果仍有使用需求，请确保使用的是 Compass 1.0.3 或更早版本。同时， Normalize 代码与 2017 年 9 月的当前版本 7.0 兼容。