简介
done-css 是一个基于 SCSS 的样式库，提供了一系列常用的 CSS 样式，方便开发人员进行快速开发。在前端开发中，CSS 样式表是必不可少的一部分，使用 done-css 可以省去进行基础样式的编写，不仅可以提高开发效率，而且可以提升代码的可维护性。
安装
使用 npm 进行安装：
npm install done-css
在项目中引入：
<link rel="stylesheet" href="node_modules/done-css/dist/done.min.css">
使用
done-css 提供了一系列的样式，使用时可以直接引入相关的 class。
比如，使用 db 类可以将元素设置为 display: block;：
<div class="db">这是一个块级元素</div>
除此之外，done-css 同样提供了一些常用的布局类，如 fl 和 fr 可以用于设置元素的浮动方向。同时，它还提供了许多有趣的效果，如 bounce、fadeIn 等。这些效果可以让网站更加生动有趣。
以下是一些例子：
<div class="bounce">这是一个弹跳效果</div> <div class="fadeIn">这是一个淡入效果</div> <div class="pull-right">这个元素向右浮动了</div>
实际上，done-css 也支持原生的 CSS 属性和值，如 background-color、font-size 等。因此，可以像编写普通的 CSS 样式一样编写样式表。
示例代码
下面是一份简单的示例代码，演示了一些常用的 done-css 类的效果：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
--------------- ----------
----- ---------------- -----------------------------------------------
-------
-- ----- --
------- -
---------- -----
-
--------
-------
------
---- -----------------------------
---- -----------------------------
---- ----------------------------------
---- -------------------------
---- ------------------------------
-------
-------总结
使用 done-css 可以让样式的编写变得更加高效和方便，让前端开发人员可以更加专注于业务逻辑的实现。done-css 还提供了很多有趣的效果让网站变得更加生动有趣。希望本文能够对前端初学者对 done-css 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75751