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

HTML5 Boilerplate Compass扩展项目技术文档

2024-12-24 19:59:55作者:裘旻烁

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

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

项目优选

收起
kernelkernel
deepin linux kernel
C
23
6
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
225
2.27 K
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台,包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分,采用java语言实现,可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
9
1
flutter_flutterflutter_flutter
暂无简介
Dart
526
116
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
987
583
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
351
1.42 K
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
61
17
GLM-4.6GLM-4.6
GLM-4.6在GLM-4.5基础上全面升级:200K超长上下文窗口支持复杂任务,代码性能大幅提升,前端页面生成更优。推理能力增强且支持工具调用,智能体表现更出色,写作风格更贴合人类偏好。八项公开基准测试显示其全面超越GLM-4.5,比肩DeepSeek-V3.1-Terminus等国内外领先模型。【此简介由AI生成】
Jinja
47
0
giteagitea
喝着茶写代码!最易用的自托管一站式代码托管平台,包含Git托管,代码审查,团队协作,软件包和CI/CD。
Go
17
0
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
JavaScript
212
287