首页
/ HTML5 Boilerplate Compass扩展项目技术文档

HTML5 Boilerplate Compass扩展项目技术文档

2024-12-24 13:40:34作者:裘旻烁

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 兼容。

登录后查看全文
热门项目推荐