前言
在前端开发中，我们常常需要使用一些工具类来辅助样式的编写，比如常见的 clearfloat、text-center、margin-auto 等。而 itl-css-utility_classes 是一个基于已有的 CSS 和预处理器 Sass 代码打造的一套集合了大量实用的 CSS 辅助工具类的 NPM 包，使用简单方便，可以快速提高我们工作效率，本文就为大家详细介绍一下如何使用它。
安装
首先，我们需要通过 npm 安装：
--- ------- -----------------------
使用
普通样式
我们可以在项目中的 CSS 文件中直接引入 itl-css-utility_classes，并使用其中的样式类：
------- -------------------------- --------- - ------- ----------- ------- ------------- -
这里我们使用了 extend 继承，将 itl-css-utility_classes 中定义的 pull-left 和 text-center 样式应用于我们自定义的 my-class 中。通过这种方式，我们可以非常简单地使用 itl-css-utility_classes 中提供的样式。
Sass
我们也可以在 Sass 文件中使用 itl-css-utility_classes：
------- ------------------------------------------------------------------------ --------- - ------- ----------- ------- ------------- -
这里我们直接引入了 itl-css-utility_classes 中的 Sass 文件，并使用其中的占位符 %pull-left 和 %text-center 来实现样式继承。
示例
下面是一个使用示例，我们定义了一个包含一张图片和一段文字的块，右侧图片固定宽度 200px，左侧文字自适应宽度：
---- --------------
---- ------------------------
---- -------------------
--------------
-------- ----- ----- --- ----- ----------- ---------- ----- --- ------------
------ ------ -- -------- ---- ------ --- ----- -- -------- ----- ----
------
------------- ------------------------------------------------------------------------
------ -
--------- -------
---------- -
------- ------------
------ ------
-
----------- -
------- -----------
------- --------------
-------------- ------
-- -
----------- --
-
-
-在上面的示例中，我们使用了 itl-css-utility_classes 中的 pull-right、pull-left 和 align-middle 样式，分别实现了右侧图片固定宽度和左侧文字自适应宽度，并同时将两列内部的元素垂直居中。这让我们的样式代码更加清晰简洁。
总结
itl-css-utility_classes 是一个非常实用的 CSS 工具类集合，可以大大提高我们的工作效率。本文向大家介绍了如何安装并使用它，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668edd9381d61a3540cb3