前言
在前端开发中，UI 样式是我们必须要处理的一个重要问题，而 tachyons-custom 是一个非常优秀的样式开发库。它以可复用和可扩展性为核心，提供了一系列的基本样式类，可以帮助我们快速开发 UI，并且也非常易于定制。本文将介绍如何使用 tachyons-custom 进行前端开发以及如何定制它以满足我们的需求。
tachyons-custom 安装
tachyons-custom 是一个 npm 包，我们可以通过以下命令进行安装：
npm install tachyons-custom --save
安装成功后，我们需要将其集成到我们的前端项目中。
tachyons-custom 集成
集成方式一
在我们的 html 文件中通过标签引入：
<link href="path/to/tachyons-custom.css" rel="stylesheet">
集成方式二
在 JS 文件中通过 import 导入：
import 'tachyons-custom/dist/tachyons-custom.min.css';
tachyons-custom 使用
tachyons-custom 提供了很多基本的样式类，我们可以将这些类应用到我们的 html 元素中。比如，我们可以通过 .bg-black 类将背景颜色设置为黑色，.white 类将文字颜色设置为白色等。
<div class="bg-black white pa3">Hello World</div>
tachyons-custom 的类名使用小写字母和连字符组成，这使得它们易于记忆和阅读。
此外，tachyons-custom 还提供了很多其他的样式类，比如 flexbox 和 grid 等布局类，typeography 类和一些特效类。我们可以查阅 tachyons-custom 官方文档来学习更多的样式类。
tachyons-custom 定制
尽管 tachyons-custom 提供了很多基本的样式类，并且也有组合类的概念，但在实际开发中，我们很可能需要一些特殊的样式类或者需要更换一些样式的值。这时，我们可以使用 tachyons-custom 的定制功能。
在 tachyons-custom 中，我们可以通过一个名为 tachyons-src 的自定义 css 变量来指定我们自己的样式类。
定制流程
首先，创建一个 src/custom 文件夹，再在其下创建一个 tachyons.css 文件。在这个文件中，我们可以添加我们自己的样式。
.invalid { border-color: red; }
然后，在我们的 html 或 css 中，将 tachyons-src 设置为我们的定制文件路径。
-- -------------------- ---- ------- ------ ------ ------- ----- - --------------- ---------------------------- - -------- ------- --- -------展开代码
具体实现
我们将通过一个简单的例子来演示如何使用 tachyons-custom 进行样式定制。我们需要创建一个新的 tachyons.css 文件，将之加入到我们项目中。在这个例子中，我们希望将 .w1，.w2，.w3 和 .w 类的宽度各自调整为 2px、4px、8px 和 16px。
首先，我们需要创建一个 tachyons.css 文件。
-- -------------------- ---- ------- --- - ------ ---- - --- - ------ ---- - --- - ------ ---- - -- - ------ ----- -展开代码
完成后，我们需要在我们的 html 或 css 中添加一个 :root 样式，将 tachyons-src 设置为我们的定制文件路径。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- ---------------------- ------------ ------- ----- - --------------- ---------------------- - -------- ----- ---------------- ------------------------------------------------------------------ -- ------- ------ ---- ---------- ---- ---- --------------- ----- ----- --- --------- ---------- ---------- ------- --------- --- --------- ------------------ ------- --------- --- ------- ------------------ ------- --------- --- -------- ------------------ ------- -------- --- --------- ----------------- ------ ------ ------- -------展开代码
在这个例子中，我们创建了一个包含四个按钮的 div 元素。各个按钮绑定了宽度类并分别设定其宽度值，分别测试了 tachyons-custom 的定制功能。
结论
tachyons-custom 是一个非常优秀的样式开发库，在前端开发中很容易使用它进行 UI 开发。通过本文介绍的使用和定制方法，我们可以掌握如何使用 tachyons-custom，并且可以有效地应用到我们自己的项目中，形成和谐的前端开发环境。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf7fb5cbfe1ea061105d
