# 介绍

常用样式库,支持 less 和 scss,包含 flex 布局、margin、padding 等。

# 使用场景

频繁的仅给标签设置间距、使用 flex 布局、对齐等高频出现的样式时使用,中后台系统经常会遇到,解决了 css 中 class 命名词穷问题。

# 安装

推荐使用 yarn 来管理依赖。

yarn add @wytxer/style-utils

# 使用

1、安装 less 编译器:

yarn add less@^3.13.1 less-loader@^4.1.0 -D

2、在入口文件导入样式库:

import '@wytxer/style-utils/lib/common.less'

3、在标签的 class 上设置类名:

<!-- 在 Vue.js 中 -->
<div class="PT12">
  <a-button class="MR10">操作一</a-button>
  <a-button class="MR12">操作二</a-button>
  <a-button class="MR16" type="primary">操作三</a-button>
</div>
<div class="FB FBJC-C">
  <a-button class="MR24">操作一</a-button>
  <a-button class="MR32">操作二</a-button>
  <a-button class="MR64" type="primary">操作三</a-button>
</div>

<!-- 在 React.js 中 -->
<div className="FB FBJC-C FBAI-C FBAC-C">
  <a-button className="MR18 ML8">操作一</a-button>
  <a-button className="MR18 MT16">操作二</a-button>
  <a-button className="MR18 MB10" type="primary">操作三</a-button>
</div>

完整的样式定义可点击这里 (opens new window)查看。

# GitHub

样式库 GitHub 地址 (opens new window)

最后更新时间: 2022-09-15 21:37:51