npm 包 itl-css-utility_classes 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们常常需要使用一些工具类来辅助样式的编写，比如常见的 clearfloat、text-center、margin-auto 等。而 itl-css-utility_classes 是一个基于已有的 CSS 和预处理器 Sass 代码打造的一套集合了大量实用的 CSS 辅助工具类的 NPM 包，使用简单方便，可以快速提高我们工作效率，本文就为大家详细介绍一下如何使用它。

安装

首先，我们需要通过 npm 安装：

npm install itl-css-utility_classes

使用

普通样式

我们可以在项目中的 CSS 文件中直接引入 itl-css-utility_classes，并使用其中的样式类：

@import "itl-css-utility_classes";

.my-class {
  @extend %pull-left;
  @extend %text-center;
}

这里我们使用了 extend 继承，将 itl-css-utility_classes 中定义的 pull-left 和 text-center 样式应用于我们自定义的 my-class 中。通过这种方式，我们可以非常简单地使用 itl-css-utility_classes 中提供的样式。

Sass

我们也可以在 Sass 文件中使用 itl-css-utility_classes：

@import "node_modules/itl-css-utility_classes/src/scss/itl-css-utility_classes";

.my-class {
  @extend %pull-left;
  @extend %text-center;
}

这里我们直接引入了 itl-css-utility_classes 中的 Sass 文件，并使用其中的占位符 %pull-left 和 %text-center 来实现样式继承。

示例

下面是一个使用示例，我们定义了一个包含一张图片和一段文字的块，右侧图片固定宽度 200px，左侧文字自适应宽度：

<div class="panel">
  <div class="panel-img"></div>
  <div class="panel-text">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin
       sapien dolor, id pulvinar quam congue eu. Fusce in volutpat urna. </p>
  </div>
</div>

-- -------------------- ---- -------
------- ------------------------------------------------------------------------

------ -
  --------- -------

  ---------- -
    ------- ------------
    ------ ------
  -

  ----------- -
    ------- -----------
    ------- --------------
    -------------- ------

    -- -
      ----------- --
    -
  -
-

在上面的示例中，我们使用了 itl-css-utility_classes 中的 pull-right、pull-left 和 align-middle 样式，分别实现了右侧图片固定宽度和左侧文字自适应宽度，并同时将两列内部的元素垂直居中。这让我们的样式代码更加清晰简洁。

总结

itl-css-utility_classes 是一个非常实用的 CSS 工具类集合，可以大大提高我们的工作效率。本文向大家介绍了如何安装并使用它，希望能对大家有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600668edd9381d61a3540cb3