前言
在前端开发中，样式处理一直是一个必不可少的环节。传统的 CSS 都需要写大量重复的代码，使用 sass/less/stylus 等 preprocessor 可以解决这个问题，但是往往会增加项目的复杂性。如果只是想要一些简单的样式集合，我们可以使用 hatt。
hatt 是一个轻量级的样式集合，它不需要编译或者安装，只需要通过 npm 引入即可。hatt 提供了很多实用的 mixins ，可以帮助我们快速编写样式集合，尤其适合用在 UI 组件库中。
本文将详细介绍如何使用 hatt，包括如何安装、使用以及这些 mixins 的详细解释。
安装
使用 hatt 非常简单，只需要通过 npm 安装即可：
npm install hatt
在项目中使用时，只需要在样式文件中引入即可：
@import 'node_modules/hatt/hatt';
如果你使用的是 less，也可以直接通过以下方式引入：
@import (less) 'node_modules/hatt/hatt.css';
hatt 会自动写入到你的项目样式中，然后你就可以使用其中所有的 mixins 了。
使用
hatt 中的 mixins 都以“--”开头，你可以在自己的样式化文件之中使用，以达到快速便捷地产生自定义样式规则的目的。
Grid system(栅格系统)
--xs-cols(count, gap)：生成指定列数和内边距的 xs 列容器。--sm-cols(count, gap)：生成指定列数和内边距的 sm 列容器。--md-cols(count, gap)：生成指定列数和内边距的 md 列容器。--lg-cols(count, gap)：生成指定列数和内边距的 lg 列容器。--xl-cols(count, gap)：生成指定列数和内边距的 xl 列容器。--gap(value)：为容器增加水平间隙。--row-gap(value)：为容器增加垂直间隙。--col-span(cols)：设置列跨度为 cols 。
Units(单位)
--half：50%。--thrid：33.33333%。--two-thirds：66.66667%。--quarter：25%。--three-quarters：75%。--aspect-ratio(width, height)：固定宽高比。--fluid-type(min-size, max-size, min-view-width, max-view-width)：响应式字体方案。
Typography(排版)
--font(face)：设置字体。--h(size)：设置标题的行高和内边距。--h1：设置h1的样式，行高为 1.2em 。--h2：设置h2的样式，行高为 1.1em 。--h3：设置h3的样式，行高为 1em 。--h4：设置h4的样式，行高为 0.9em 。--h5：设置h5的样式，行高为 0.8em 。--h6：设置h6的样式，行高为 0.7em 。--line(lineColor, lineWidth, lineStyle, linePosition)：设置文本的底线。--ellipsis(lines)：一行或多行的文本溢出省略。
Helpers(辅助类)
--abs-center：绝对居中。--fixed-center: 固定定位居中。--clearfix：浮动清除。--visuallyhidden：屏幕阅读器可见性调整。
示例代码
我们来看看一个使用 hatt 来实现栅格系统的例子：
-- -------------------- ---- -------
---- ------------------
---- ------------
---- ---------------- -----------
---- -------------
---- --------- --------- -----------------
---- ------------------
--- ----------------------- ----------
-- ---------------------- ----- ------- ---- -- ----- -- --- ---- ----- --- ---- -- --- ---- -- --- ------ ------------
------
------
------
---- ---------------- -----------
---- -------------
---- --------- --------- -----------------
---- ------------------
--- ----------------------- ----------
-- ---------------------- ----- ------- ---- -- ----- -- --- ---- ----- --- ---- -- --- ---- -- --- ------ ------------
------
------
------
---- ---------------- -----------
---- -------------
---- --------- --------- -----------------
---- ------------------
--- ----------------------- ----------
-- ---------------------- ----- ------- ---- -- ----- -- --- ---- ----- --- ---- -- --- ---- -- --- ------ ------------
------
------
------
------
-------- -------------------- ---- -------
---------- -
---------- -------
------- - -----
-------- - -----
---- -
------ -----
---------- -----
------- - -----
-------- -----
---------- -----
---------------- -------
---------- -
---------- --
---------- --
---------- --
---------- --
---------- ---
------ -----
----------- --
-------- -----------
-
----- -
-------------- ----
--------- -------
----------- - --- ---- ------- -- -- -----
--------- -
-------- ------
------ -----
------- -----
-
---------- -
-------- -----
----------- -
------- - - ------
---------- ---------
------------ ----
------------ ----
-
---------- -
-------------- -----
---------- -----
------------ ----
------ --------
-
-
-
-
-在这个例子中，我们通过设置不同的列容器内边距和列数，来实现了一个响应式栅格系统。同时，通过使用 hatt 中的其他 mixins，比如 --gap，我们不需要写任何多余的 CSS。
总结
hatt 是一个非常适合用在 UI 组件库中的轻量级样式集合，它提供了很多实用的 mixins，可以大大减少样式编写时间。同时，hatt 的安装和使用也非常简单，只需通过 npm 安装即可开始使用。
如果你正在开发一个 UI 组件库，或者想要简化样式编写流程，不妨尝试一下 hatt。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557eb81e8991b448d4fd4