前言
在前端开发中，常常需要使用一些 UI 框架来帮助完成页面开发。其中，很多开发者都会选择使用 Bootstrap 或者 Foundation 这类的框架，但是这些框架都比较大，很多开发者希望使用一个更加轻量级的框架来满足自己的需求。Spectre.css 就是一款非常优秀的轻量级 CSS 框架，它的大小不到 10kb，但是提供了非常丰富的样式库和组件，可以满足大部分的页面需求。而 spectre-stylus 就是将 Spectre.css 转换为 stylus 格式的 npm 包，方便在 stylus 项目中使用 Spectre.css 样式库。
安装及使用
安装
在 Node.js 环境中，使用 npm 包管理器进行安装：
npm install spectre-stylus --save-dev
导入到 stylus 项目
在 stylus 项目中，可以使用 @import 命令导入 Spectre.css 样式库。首先要确定 Spectre-stylus 被正确安装在了项目目录中的 node_modules 文件夹中。
然后，将以下代码添加到你想要编译的 stylus 文件中：
@import 'node_modules/spectre-stylus/src/spectre.sass'
这样，就可以使用 Spectre.css 样式库中的所有样式和组件了。
指导意义
Spectre.css 是一个非常优秀的轻量级 CSS 框架，使用 spectre-stylus 将其转换为 stylus 格式，可以方便在 stylus 项目中使用 Spectre.css 样式库，从而让开发者更加高效地完成前端页面开发。
示例代码
-- -------------------- ---- -------
------- ----------------------------------------------
-- -- ----------- ----- --------- --
----------
----------- ----
-- -- ----------- ----- ---- --
----
----------- ----
------------------
------- ----
-------------- --- ----- ----
----------
------ ----
-- -- ----------- ----- ------ --
------
----------- ----
----------------- -------
------ ----
------- ----
-------------- ---
-------- --- ----
------- -------
----------- ---------------- ---- ----
-------
----------------- -------以上代码演示了如何在 stylus 项目中使用 Spectre.css 样式库中的样式以及组件。需要注意，这里我使用了 Spectre.css 提供的一些组件进行样式修改，从而达到了更加美观的页面效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3781e8991b448daf75