在 Web 开发过程中，UI 设计常常是一个极为重要的环节。而在实际运用中，我们更加追求快速地实现我们的设计想法。本文将介绍一款基于 Node.js 的 npm 包 -- bookcss，其提供了一些预设的样式，可以快速地构建出符合我们想法的样式。
什么是 bookcss
bookcss 是一种基于 SCSS 的 CSS 样式库，与 Bootstrap 相似，它使用了一些内置的 CSS 类名称来决定元素样式。bookcss 致力于为 Web 书籍和技术文档提供干净、整洁的样式。它包含了很多有用的组成部分，例如目录、章节、代码块等。
bookcss 是用 Node.js 包管理工具 npm 打包和分发的，安装方法如下：
npm install bookcss --save
安装成功后，我们可以在 node_modules/bookcss 下找到所有的源代码和预编译文件 book.css、book.min.css 和 book.scss。
快速上手
bookcss 使用起来非常简单，我们只需要在 HTML 或模板文件中添加相应的 CSS 类就可以套用样式，如：
<div class="book">
<div class="book-toc">封面</div>
<div class="book-chapter">
<h1>第一章</h1>
<p>欢迎来到`bookcss`。</p>
</div>
</div>在这个例子中，我们使用了两个 bookcss 内置的 CSS 类：book 和 book-chapter。
各个组件
注意：bookcss 需要在 HTML 中使用 font-family: 'Source Sans Pro', sans-serif; 以得到最佳展示效果。
封面
使用 .book-toc 类创建一个带有 Cover 的书籍封面。例子：
<div class="book-toc"> <img src="cover.jpg" alt="book cover" /> <h1>书名</h1> <h2>作者名</h2> </div>
章节
使用 .book-chapter 类来创建一个新的章节。这个类应该包含可以在标题内容之前并排的任何内容。例子：
<div class="book-chapter"> <h1>第一章</h1> <p>欢迎来到`bookcss`。</p> </div>
前置
使用 .book-preface 类来创建一个前置章节。这个类应该包含可以在标题内容之前并排的任何内容。例子：
<div class="book-preface"> <h1>前言</h1> <p>这是一本关于......</p> </div>
代码块
使用 .book-code 类来创建代码块。例子：
<div class="book-code"> <pre><code>此处放置代码</code></pre> </div>
例子
使用 .book-example 类来创建一个例子章节。例子：
<div class="book-example"> <h2>例子</h2> <p>以下是一段代码：</p> <pre><code>此处放置代码</code></pre> </div>
引用
使用 .book-quote 类来创建一个引用章节。例子：
<div class="book-quote"> <p>这是一句名言、警句或引用。</p> <p><cite>来源</cite></p> </div>
图片
使用 .book-image 类来创建一个图片。例子：
<div class="book-image"> <img src="image.jpg" alt="image" /> <p>这是一张图片。</p> </div>
蓝色提示
使用 .book-callout-blue 类来创建一个蓝色的提示框。例子：
<div class="book-callout book-callout-blue"> <p>这是一个蓝色的提示框。</p> </div>
绿色提示
使用 .book-callout-green 类来创建一个绿色的提示框。例子：
<div class="book-callout book-callout-green"> <p>这是一个绿色的提示框。</p> </div>
黄色提示
使用 .book-callout-yellow 类来创建一个黄色的提示框。例子：
<div class="book-callout book-callout-yellow"> <p>这是一个黄色的提示框。</p> </div>
红色提示
使用 .book-callout-red 类来创建一个红色的提示框。例子：
<div class="book-callout book-callout-red"> <p>这是一个红色的提示框。</p> </div>
配置
bookcss 有一些默认配置可以方便地修改。以下是目前的默认设置。
-- -------------------- ---- ------- -- ---- ------------------ ------- ---- ----- ---------- --------- -- ------ ---------------- ---- --------- -- ----------------- ------------------------- ---- --------- -- -------- ---------------- ---- --------- -- ---------- ------------------------- ----- --------- -- ------------------ -------------------- ---------------- --------- -- ------------------ -------------------------- ------- ---------
我们可以通过以下方式修改配置：
// 在 _custom.scss 文件中修改变量 $body-font-family: 'Arial', sans-serif; // 导入 _custom.scss 文件 @import "path/to/_custom.scss"; // 在编译 Lcss 代码时加入 “--include-path” 参数 sass --watch --include-path=node_modules <input>:<output>
结语
bookcss 提供了一些预设的样式，可以快速地构建出符合我们想法的样式。使用它可以使我们的 UI 设计过程变得更加高效。同时，通过了解它的使用方式可以帮助我们更好地理解 SCSS 和 CSS 的知识。
如果您需要更多的帮助，请查看 GitHub 上的官方文档或阅读源代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551b781e8991b448cf17c