简介
spectre.css-stylus 是 spectre.css 的 stylus 语言实现，并且可以直接使用 npm 安装，方便了前端开发者使用这个 CSS 框架。
安装
使用 npm 安装
可以使用以下命令进行安装：
npm install spectre.css-stylus --save
使用
引入
在你的项目中，在你的 CSS 文件中导入 spectre.css-stylus 。
@import 'spectre.css-stylus'
直接使用
你也可以直接使用 spectre.css-stylus 以 class 的形式添加样式。例如：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
--------- ------------
----- ---------------- ------------------------------------------------------------
-------
------
--- ------------------------- -----------
---- -------------
---- -------------------
---- ----------------------------------
------
---- --------------------
---- ----------------- -------- -----------
---- -------------------- --------------- --------------
------
---- ------------------
-------- ----- ----- --- ----- ----------- ---------- ----- --------- --- ------- ------- ----
------
---- --------------------
------- ---------- ----------------------------
------
------
-------
-------定制化
spectre.css-stylus 提供了很多 mixin 和变量，你可以使用这些 mixin 和变量定制你自己的样式。例如：
-- -------------------- ---- ------- -- -- ------------------ ------- --------------------------------------- -- ---------- --------- - ------- -- ------- --------- --------------------- - --------- --------------------------- - ------------------ -- ---- ----------- ---------------
示例代码
安装
npm install spectre.css-stylus --save
引入
@import 'spectre.css-stylus'
直接使用
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
--------- ------------
----- ---------------- ------------------------------------------------------------
-------
------
--- ------------------------- -----------
---- -------------
---- -------------------
---- ----------------------------------
------
---- --------------------
---- ----------------- -------- -----------
---- -------------------- --------------- --------------
------
---- ------------------
-------- ----- ----- --- ----- ----------- ---------- ----- --------- --- ------- ------- ----
------
---- --------------------
------- ---------- ----------------------------
------
------
-------
-------定制化
-- -------------------- ---- ------- -- -- ------------------ ------- --------------------------------------- -- ---------- --------- - ------- -- ------- --------- --------------------- - --------- --------------------------- - ------------------ -- ---- ----------- ---------------
结语
spectre.css-stylus 可以让你方便的使用 spectre.css ，同时也为你提供了定制化的方便。希望这篇使用教程对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709e8ccae46eb111effc