配置步骤
安装 uct-theme
npm i uct-theme
生成 uct-theme 文件,可以自己配置 ui 规范
npx uct-theme init
将 scss 导入项目
@import './uct-theme.scss'; // 注意文件位置，导入顺序不可变
@import 'uct-theme/index.scss';
使用
直接在标签上添加 class，无需再自己手写 css 样式
<div class='m-t-10 c-red'>margin-top:10px; color:#f00;</div>
使用文档（<>表示必填，[]表示可选，内部为$的参数可以在 uct-theme 内自行配置。）
// 偏移
<m|p>-[l|t|r|b|x|y]-<$space-sizes>
m-t-10 margin-top:10px;
m-x-10 margin: 10px 0;
m-y-10 margin: 0 10px;
m-10 margin: 10px;
p-t-10 padding-top:10px;
p-x-10 padding: 10px 0;
p-y-10 padding: 0 10px;
p-10 padding: 10px;
// 颜色
<c|bc>-<primary|success|error|warning|info|bgc|main|base|tips|light|brc|black|white|gray|dark|blue|skyblue|green|red|orange|yellow>[-<1|2|3|4|5|6|7|8|9>]
<!-- 字体颜色 -->
c-red color:#f00;
<!-- 背景颜色 -->
bc-red background-color: #f00;
bc-red-1 background-color: rgba(#f00,.1);
<!-- 边框颜色 -->
border-<s|ds|dt|db>-<$border-sizes>-<primary|success|error|warning|info|bgc|main|base|tips|light|brc|black|white|gray|dark|blue|skyblue|green|red|orange|yellow>
border-s-1-red border:1px solid #f00;
border-s-t-1-red border-top:1px solid #f00;
// 圆角
br-[t|l|r|b|tl|tr|bl|br]-<$radius-sizes>
br-tl-l10 border-top-left-radius:10px;
br-t-10 border-radius:10px 10px 0 0;
br-l-10 border-radius: 10px 0 0 10px;
br-r-10 border-radius: 0 10px 10px 0;
br-b-10 border-radius: 0 0 10px 10px;
br-10 border-radius: 10px;
// 字体
font-<$font-size>
font-12 font-size:12px;
// 文本溢出省略
more-<$omit-sizes>
more-1
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
more-3
{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
// flex
flex-<x|y|xr|yr>-<s|c|e|sb|sa>-<s|c|e|baseline|stretch>
flex-x-sb-s
{
display: flex;
flex-direction:row;
justify-content:space-between;
align-items:flex-start;
}
// grid
grid-<x|y>-<$grid-sizes>
grid-y-1
{
display:grid;
grid-auto-flow:column;
grid-template-rows: repeat(1, minmax(0, 1fr));
}
grid-x-1
{
display:grid;
grid-template-column: repeat(1, minmax(0, 1fr));
}
// gap
gap-[x|y]-<$gap-sizes>
gap-10 gap: 10px;
gap-x-20 column-gap: 20px;
gap-y-40 row-gap: 40px;
基本单位
- 配置单位在 uct-theme.scss 文件中
- 可改变基本单位如 1rem,2rpx 等
- 所有生成的 css 大小都会 * $unit
// 基本单位
$unit: 1px;
响应式
说明
| 断点前缀 | 最小宽度 | CSS |
| --- | ---- | ----|
| | 0 | @media (min-width: 0) { ... } |
| sm | 768px | @media (min-width: 768px) { ... } |
| md | 1024px | @media (min-width: 1024px) { ... } |
| xl | 1280px | @media (min-width: 1280px) { ... } |
使用
所有 uct-theme 生成的 css 前加前缀
<div class="md-c-blue c-red sm-m-t-10">123</div>
删除未使用的 css
purgeCss 中文网
- 为了使开发经验尽可能的富有成效，uct-theme 为您生成了成千上万的功能类，其中大部分您可能不会真正使用。
- 把 uct-theme 想象成一个巨大的乐高盒子--您把它倾倒在地板上，建造您想建造的东西，然后当您完成后，您把所有您不用的碎片放回盒子里。
- 例如，uct-theme 为您的间距尺度中的每一个尺寸，为您可能想要应用边距的元素的每一个侧面，在您的项目中使用的每一个断点生成边距实用程序。这导致了数以百计的不同组合，这些组合都是重要的，但不可能都是需要的。
- 当构建生产时，您应该总是使用 purge 来 tree-shake 优化未使用的样式，并优化您的最终构建大小, 删除未使用的样式时，很难最终得到超过 10kb 的压缩 CSS。
VS Code 插件
vscode 插件市场搜索 uct-css-tip
uct-css-tip
- uct-css-tip 是一款专门为 css 提供做的 vscode 插件
- 目前支持自定义 css 文件提示（默认提示 uct-theme 下的 index.css）
- 提示自定义 css 需要在 uct-css-tip 的扩展设置内修改 css 文件路径如（D:\nocode\packages\uct-theme\index.css）
| |
