简介
tachyons-extendable 是一个基于 tachyons 的 CSS 库，可以帮助开发者快速搭建基础的 UI 风格。与 tachyons 不同的是，tachyons-extendable 提供了自定义类名的功能，可以根据自己的需求自主扩展样式规则。
使用方法
安装
在项目的根目录下，执行以下命令：
npm install tachyons-extendable
或者
yarn add tachyons-extendable
引用
在需要使用的页面或组件中引用 tachyons-extendable：
import 'tachyons-extendable';
自定义样式
tachyons-extendable 提供了一套基础样式规则，但不一定满足我们的需求。通过自定义类名，可以扩展样式规则。
.my-bg-dark {
background-color: #333333;
}
.my-font-bold {
font-weigth: bold;
}上面是一个自定义样式的例子，我们可以将其写入 CSS 文件中，在需要使用时添加类名即可：
<div class="my-bg-dark my-font-bold">自定义样式</div>
修改默认样式
tachyons-extendable 的默认样式是基于 tachyons 的，我们也可以修改默认样式。在项目中新建 src/styles/tachyons-custom.css 文件，写入以下代码：
-- -------------------- ---- ------- --- ------------------- ------ -- -- --------------------------------------------------- -- -- ---- ------ -- ----- - -------- ----- ------- ----- --------- -------- -
这段代码修改了三个基础颜色，我们可以通过变量的方式引用这几个颜色。比如定义一个 text-primary-color 类名：
.text-primary-color {
color: var(--orange);
}这样在需要使用时，只需添加 text-primary-color 的类名即可：
<div class="text-primary-color">修改默认样式</div>
高效使用
tachyons-extendable 的样式是基于类名实现的，因此在使用时不用担心 CSS 样式会冲突。但是为了高效使用，建议我们在定义类名时遵循一些规范：
- 类名尽量短（与 tachyons 的设计理念相同）。比如，使用
.bg替换.background-color。 - 可重用的样式代码可以定义成 mixins 或者函数，比如：
@mixin remove-border-radius {
border-radius: 0;
}.font-family {
font-family: 'Microsoft YaHei', sans-serif;
}
.title-large {
font-size: 24px;
@include font-family;
}- 样式编写要契合 HTML 的结构，比如容器相关的样式可以写在
.container类名中，按钮相关的样式可以写在.btn类名中。
总结
tachyons-extendable 是一个好用的 CSS 库，可以帮助我们快速搭建项目，提高开发效率。在使用时需要遵循规范，编写高效的代码，让样式具有可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e3587