前言：本教程旨在介绍如何使用 npm 包 styledocco，用它来生成你的 CSS 文档并展示在美观的页面上。使用本工具能够让你更加清晰地呈现你的 CSS 定义，节省时间。
什么是 styledocco
styledocco 是一个为 CSS 生成文档和漂亮页面的工具。这个工具将 CSS 样式表和注释结合在一起，生成一个可交互的 HTML 文件。它基于 Ruby，可以使用命令行或 Grunt task 的方式完成。
安装
前置条件：在安装它之前必须要先安装 Ruby 和 Node.js。
npm install styledocco -g
使用
安装完 styledocco 后，增加一个配置文件 .styledocco.json，它会告诉 styledocco 应该在哪些 CSS 文件上生成文档，以及文档生成的位置：
-- -------------------- ---- -------
-
------- --- ---------
------ -------
------ --
------- -----------
-------- ------------------
--------- ----
--
-- name: 项目名
- out: 生成文档的位置
- css.name: 生成的样式表名
- css.files: 样式表文件的位置
- css.expand: 是否使用子目录生成样式表的子目录
接下来使用以下命令在命令行中运行：
styledocco
如果你使用 Grunt 来完成这个任务，你可以在 Gruntfile.js 中加上以下定义：
-- -------------------- ---- -------
------------------
----------- -
-------- -
----- --- ---------
---- -------
---- --
------- -----------
-------- ------------------
--------- ----
--
--
---- --
-
--然后你可以在命令行上输入：
grunt styledocco
进一步定制
如果你想要进一步扩展生成的文档，你可以为代码加上标签，标签包括：
{ .classname }{ @variable }{ #id }{ $media-query }
这些标签可以帮助你更好的区分你的 CSS 定义的不同部分，比如：
-- -------------------- ---- -------
-- -----------------------------------------------
------ --- ----------
----------------------------------------------- --
-- -----
----------------------------------------------- --
- ------- -
--- -- - ------------ ------ ----------- -
-- ----- ------- --
- ---------------- -
- ----- --------- ------- ------ ------ ------- --------- ------- --------- ------ - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -
-- ----------
----------------------------------------------- --
----- - ----- ------ --------- ---------- ------ ---------- ------ ----------- -
--- --- -- - ------------ ------- -
-- - --------------- -------------------- -------------- -
-- - --------------- --------------------- -------------- -
-- - --------------- -------------------- ----------------- -其中，{ .header } 和 { .component-clear } 就是标签，使用了 { .classname }。
你可以进一步在生成文档时显示对应的部分：
-- -------------------- ---- -------
-
------- --- ---------
------ -------
------ --
------- -----------
-------- ------------------
--------- -----
---------- -
----------- --
-------------
-------------- --- ------------
------- -
-------------------
------------------------- ----------
-------------------
------------- ------
-------- ---------
--
------- ----- -- --- ---- ---------- --- --- -----
--
-
--
-其中：
- id: 标记 id，可为空
- title: 部分名称
- note: 注释，可为空
- tags: CSS 定义块描述
最后你可以运行 styledocco 并在浏览器中查看生成的文档。
结论
在本文中，我们学会了如何使用 npm 包 styledocco。当你积累了大量的 CSS 定义和规则时，它将帮助你更加清晰地呈现你的 CSS，从而使你的工作更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75838