在前端开发中，我们经常会用到样式框架（CSS framework）来帮助我们快速构建页面。而 @savvy-css/garnishes 就是一款非常优秀的 CSS 框架，它提供了许多实用的 UI 组件（garnish）和常用的样式类（class）。
在本文中，我们将详细介绍如何使用 @savvy-css/garnishes，包括安装、引入、使用方法和示例代码等内容。
安装
@saavy-css/garnishes 是一个 npm 包，所以在开始使用它之前，我们首先需要安装它。在项目的根目录下运行如下命令：
--- ------- --------------------
这样，@savvy-css/garnishes 就会被安装到我们的项目中。
引入
在使用 @savvy-css/garnishes 中的组件或样式类之前，我们需要先将它们引入到项目中。可以使用如下方式：
------- -------------------------------------
这样，@savvy-css/garnishes 中的所有组件和样式类就可以在项目中使用了。
当然，我们也可以根据需要选择性地引入某些组件或样式类。例如，如果我们只需要使用按钮（button）这个组件，可以这样引入：
------- ---------------------------------------------
使用方法
组件
@savvy-css/garnishes 中的组件（garnish）都是以 class 的形式存在的。我们只需要在 HTML 元素中添加相应的 class，即可使用对应的组件。
例如，要使用按钮（button）这个组件，只需要在 HTML 的按钮元素中添加 class="button" 即可：
------- -------------------- ------------
同样，要使用表格（table）这个组件，只需要在 HTML 的表格元素中添加 class="table" 即可：
------ --------------
-------
----
---------- ------
---------- ------
---------- ------
-----
--------
-------
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
--------
--------样式类
除了组件以外，@savvy-css/garnishes 中还提供了许多实用的样式类。我们同样只需要在 HTML 元素中添加相应的 class，即可使用对应的样式类。
例如，要添加一个带有红色边框的文本框，可以这样写：
------ ----------- -------------------
@savvy-css/garnishes 中的样式类都有清晰的命名，让我们在使用时更加方便。
示例代码
使用按钮组件
--------- -----
------
------
----- ----------------
---------------------
----- ---------------- ------------------------------------------
-------
------
------- -------------------- ------------
-------
-------使用表格组件
--------- -----
------
------
----- ----------------
---------------------
----- ---------------- ------------------------------------------
-------
------
------ --------------
-------
----
---------- ------
---------- ------
---------- ------
-----
--------
-------
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
--------
--------
-------
-------使用样式类
--------- -----
------
------
----- ----------------
--------------------
----- ---------------- ------------------------------------------
-------
------
------ ----------- -------------------
-------
-------结语
@saavy-css/garnishes 是一个优秀的 CSS 框架，它提供了许多实用的组件和样式类，能够帮助我们快速构建页面。在使用时，我们只需简单地引入和使用，就能够享受到它带来的便利。
希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005727881e8991b448e8ab5