前言
在前端项目开发中，经常需要使用一些样式工具类，比如清除浮动、文本行截断、布局等等。这些工具类的样式往往是比较常规的，我们可以手动编写一个通用类，也可以从网络上找到别人编写好的 CSS 工具库。但是，前者需要耗费时间，后者虽然方便，但是存在很多不符合我们要求的工具类，浪费了加载工具库的时间和下载资源的带宽。同时，使用别人编写好的工具库也不确定是否有深入学习和定制工具库的意义。要解决这些问题，我们可以选择一个轻量、丰富、可配置、易扩展的开源 npm 包，用于提供常用的 CSS 工具函数和 CSS 工具类。
@savvy-css/utilities 简介
@savvy-css/utilities 是一款基于 css-modules 和 PostCSS 编写的 CSS 工具库。它是一个轻量、丰富、可配置、易扩展的开源 npm 包，提供常用的 CSS 工具函数和 CSS 工具类。
有了这个工具库，我们可以快速地完成常规的样式需求，比如边距、颜色、文本、布局、清除浮动等等，既可以通过类名引入全局样式，也可以通过函数获取指定样式。
安装
首先，我们需要安装 npm 包：
--- - -- --------------------
使用方法
在 CSS 文件中引入 @savvy-css/utilities：
------- ------------------------
使用类名（Utility Classes）
@savvy-css/utilities 提供了非常丰富的 CSS 工具类，我们可以使用下面样式类模板完成我们日常开发中遇到的大多数样式需求。
| 模板名字 | 解释 | 示例代码 |
|---|---|---|
| __-cf | 清除浮动 | <div class="box __-cf"></div> |
| __-cl | 清除浮动 | <div class="box __-cl"></div> |
| __-d-x | 显示方式 | <div class="box __-d-flex"></div> |
| __-d-b | 显示方式 | <div class="box __-d-block"></div> |
| __-d-i | 显示方式 | <div class="box __-d-inline"></div> |
| __-d-ib | 显示方式 | <div class="box __-d-inline-block"></div> |
| __-d-t | 显示方式 | <div class="box __-d-table"></div> |
| __-d-tc | 显示方式 | <div class="box __-d-table-cell"></div> |
| __-dt-cc | 显示方式 | <div class="box __-d-table-cell __-dt-center __-dt-middle"></div> |
| __-dt-r | 显示方式 | <div class="box __-d-table-row"></div> |
| __-ov-h | overflow | <div class="box __-ov-hidden"></div> |
| __-ov-a | overflow | <div class="box __-ov-auto"></div> |
| __-ov-s | overflow | <div class="box __-ov-scroll"></div> |
| __-bg-c | 背景颜色 | <div class="box __-bg-blue"></div> |
| __-t-c | 字体颜色 | <div class="box __-t-white"></div> |
| __-b | 边框 | <div class="box __-b"></div> |
| __-bt | 边框 | <div class="box __-bt"></div> |
| __-br | 边框 | <div class="box __-br"></div> |
| __-bb | 边框 | <div class="box __-bb"></div> |
| __-bl | 边框 | <div class="box __-bl"></div> |
| __-w | 宽度 | <div class="box __-w-100"></div> |
| __-h | 高度 | <div class="box __-h-100"></div> |
| __-max-w | 最大宽度 | <div class="box __-max-w-100"></div> |
| __-max-h | 最大高度 | <div class="box __-max-h-100"></div> |
| __-m | 外边距 | <div class="box __-m-10"></div> |
| __-mx | 外边距 | <div class="box __-mx-10"></div> |
| __-my | 外边距 | <div class="box __-my-10"></div> |
| __-mt | 上外边距 | <div class="box __-mt-10"></div> |
| __-mr | 右外边距 | <div class="box __-mr-10"></div> |
| __-mb | 下外边距 | <div class="box __-mb-10"></div> |
| __-ml | 左外边距 | <div class="box __-ml-10"></div> |
| __-p | 内边距 | <div class="box __-p-10"></div> |
| __-px | 内边距 | <div class="box __-px-10"></div> |
| __-py | 内边距 | <div class="box __-py-10"></div> |
| __-pt | 上内边距 | <div class="box __-pt-10"></div> |
| __-pr | 右内边距 | <div class="box __-pr-10"></div> |
| __-pb | 下内边距 | <div class="box __-pb-10"></div> |
| __-pl | 左内边距 | <div class="box __-pl-10"></div> |
| __-bg-i | 背景图片 | <div class="box __-bg-i-url(./images/photo.jpg)"></div> |
| __-lh | 行高 | <div class="box __-lh-2"></div> |
| __-fs | 字体大小 | <div class="box __-fs-14"></div> |
| __-fw-b | 字体加粗 | <div class="box __-fw-bold"></div> |
| __-fw-n | 字体加粗 | <div class="box __-fw-normal"></div> |
| __-td-n | 字体下划线 | <div class="box __-td-none"></div> |
| __-td-u | 字体下划线 | <div class="box __-td-underline"></div> |
可以看到，通过简单的样式类名，我们可以很方便地实现我们日常开发中遇到的大部分样式需求。
使用函数（JS Functions）
除了使用类名，@savvy-css/utilities 还提供了一组 JavaScript 函数，用于获取特定样式。
borderColor()：边框颜色
------ - ----------- - ---- ----------------------- -------------------- -- ------------- -----
borderRadius()：边框圆角
------ - ------------ - ---- ----------------------- -------------------- -- -------------- ----
boxShadow()：阴影
------ - --------- - ---- ----------------------- -------------- --- --- ------- -- ----------- --- --- --- -----
display()：显示方式
------ - ------- - ---- ----------------------- ---------------- -- -------- -----
margin()：外边距
------ - ------ - ---- ----------------------- --------------- -- ------- -----
padding()：内边距
------ - ------- - ---- ----------------------- ---------------- -- -------- -----
textDecoration()：文本装饰
------ - -------------- - ---- ----------------------- ----------------------- -- ---------------- -----
textOverflow()：文本溢出
------ - ------------ - ---- ----------------------- ------------------------- -- -------------- ---------
whiteSpace()：空白
------ - ---------- - ---- ----------------------- --------------------- -- ------------ -------
贡献
@savvy-css/utilities 是一个开源 npm 包，欢迎各位开发者一起为它贡献代码、提供反馈和建议，让它更加完善和适合我们的开发需求。
结语
@savvy-css/utilities 是一个轻量、丰富、可配置、易扩展的 CSS 工具库，可以帮助我们更加高效地完成日常开发样式需求。通过这篇文章，我们介绍了 @savvy-css/utilities 的基本使用方法和常用功能，希望能对您的开发工作有所帮助，也欢迎您通过使用和参与贡献来支持它的发展，为更多的开发者提供优秀的前端工具库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055aaa81e8991b448d8372