# windi-css-uni
## 1️⃣ 简介
Github：[https://github.com/SunSeekerX/uni-app-starter/tree/main/packages/windi-css-uni](https://github.com/SunSeekerX/uni-app-starter/tree/main/packages/windi-css-uni)
这是一些 css 的简写类名的库，用于快速开发 uni-app。适用于 vue+nvue 文件。类名的设计参考了 [windicss](https://github.com/windicss/windicss) 的类名。
大部分效果可以参考 [https://cn.windicss.org/guide/](https://cn.windicss.org/guide/) 预览。
在写代码的过程中，写 css 是非常头疼的事情，例如：
1. **命名**；这应该是所有程序员的痛。
2. **写 dom 不能直接写 css**；html 和 css 通常不在一块，需要滑动很长才能找到 css 定义的地方。
3. **很多重复定义**；像 `diaplay: flex;` 这样的代码在 css 中写了太多太多
缺点也很明显
1. **增加了一些项目根本没有用到的 css 类**
2. **可读性不好**
3. **有一定的学习成本和记忆成本**
有舍有得，自行取舍。
## 2️⃣ 快速上手
### 安装
**npm**
```bash
npm i @limm/windi-css-uni
# or
yarn add @limm/windi-css-uni
```
**插件市场**
插件市场地址：[https://ext.dcloud.net.cn/plugin?name=windi-css-uniapp](https://ext.dcloud.net.cn/plugin?name=windi-css-uniapp)
### 导入
~~推荐全部引入，开启 `treeshaking` 会自动裁剪没有用到的类~~，截至目前，css 裁剪没有方案。
`${app}/App.vue` style 标签最上方导入
```scss
// npm 下载
@import '@limm/windi-css-uni';
// npm 下载 - 如果使用了 stylelint
@import '@limm/windi-css-uni/src/index.scss';
// 如果是插件市场导入的
@import '@/uni_modules/windi-css-uniapp/index.scss';
```
**关于大小**
全部压缩之后大概 258KB 左右大小。nvue 下应该不到 200KB。
### 使用
在下面列出的类名前增加 `wd-` 这是全局的前缀，为了防止和其他库或者你自己定义的样式冲突。
```html
{{ item.name }}
```
## 4️⃣ class
### 通用
#### 排版
| | 样式参考 | 说明 |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| **Font Family** | | |
| font-sans | | !nvue |
| font-serif | | !nvue |
| font-mono | | !nvue |
| | | |
| **font-size** | | |
| text-{8~48} | font-size: {8-48}px; | |
| text-{8~96}r | font-size: {8-96}rpx; | |
| | | |
| **字体平滑度** | | |
| antialiased | -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; | !nvue |
| subpixel-antialiased | -webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto; | !nvue |
| | | |
| **font-style** | | |
| italic | font-style: italic; | |
| not-italic | font-style: normal; | |
| | | |
| **font-weight** | | |
| font-{100-900} | font-weight: {100-900}; | 步长为 100 |
| | | |
| **连字符** | | |
| hyphens-none | hyphens: none; | !nvue |
| hyphens-manual | hyphens: manual; | !nvue |
| hyphens-auto | hyphens: auto; | !nvue |
| | | |
| **行高** | | |
| leading-{8-48} | line-height: {8-48}px; | |
| leading-{8-96}r | line-height: {8-96}rpx; | |
| | | |
| **文本对齐** | | |
| text-left | text-align: left; | |
| text-center | text-align: center; | |
| text-right | text-align: right; | |
| text-justify | text-align: justify; | !nvue |
| | | |
| **文本颜色** | | |
| text-transparent | color: transparent; | !nvue |
| text-current | color: currentColor; | !nvue |
| text-000
text-black | color: #000; | |
| text-fff
text-white | color: #fff; | |
| text-{100~900} | color: #{111-999}; | 步长为 111 |
| | | |
| **垂直对齐** | | |
| align-baseline | vertical-align: baseline; | !nvue |
| align-top | vertical-align: top; | !nvue |
| align-middle | vertical-align: middle; | !nvue |
| align-bottom | vertical-align: bottom; | !nvue |
| align-text-top | vertical-align: text-top; | !nvue |
| align-text-bottom | vertical-align: text-bottom; | !nvue |
| | | |
| **文本溢出** | | |
| truncate | text-overflow: ellipsis;
!nvue
overflow: hidden;
-o-text-overflow: ellipsis; | |
| overflow-ellipsis | text-overflow: ellipsis;
!nvue
-o-text-overflow: ellipsis; | |
| overflow-clip | !nvue
overflow: clip;
nvue
text-overflow: clip; | |
| | | |
| **行数** | | |
| lines-{1~8} | nvue
lines: {1~8};
!nvue
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: {1~8}; | |
| | | |
| **空格** | | |
| whitespace-normal | white-space: normal; | !nvue |
| whitespace-nowrap | white-space: nowrap; | !nvue |
| whitespace-pre | white-space: pre; | !nvue |
| whitespace-pre-line | white-space: pre-line; | !nvue |
| whitespace-pre-wrap | white-space: pre-wrap; | !nvue |
| | | |
| **断字** | | |
| break-normal | overflow-wrap: normal;
word-break: normal; | !nvue |
| break-words | overflow-wrap: break-word; | !nvue |
| break-all | !nvue: word-break: break-all; | !nvue |
### 背景
| | 样式参考 | 说明 |
| -------------------- | ---------------------------------- | ---------- |
| **背景固定** | | |
| bg-fixed | background-attachment: fixed; | !nvue |
| bg-local | background-attachment: local; | !nvue |
| bg-scroll | background-attachment: scroll; | !nvue |
| | | |
| **背景裁剪** | | |
| bg-clip-border | background-clip: border-box; | !nvue |
| bg-clip-padding | background-clip: padding-box; | !nvue |
| bg-clip-content | background-clip: content-box; | !nvue |
| | | |
| **背景颜色** | | |
| bg-transparent | background-color: transparent; | |
| bg-current | background-color: currentColor; | !nvue |
| bg-fff
bg-white | background-color: #fff; | |
| bg-000
bg-black | background-color: #000; | |
| bg-{111-999} | background-color: #{111-999}; | 步长为 111 |
| | | |
| **背景图像位置** | | |
| bg-bottom | background-position: bottom; | !nvue |
| bg-center | background-position: center; | !nvue |
| bg-left | background-position: left; | !nvue |
| bg-left-bottom | background-position: left bottom; | !nvue |
| bg-left-top | background-position: left top; | !nvue |
| bg-right | background-position: right; | !nvue |
| bg-right-bottom | background-position: right bottom; | !nvue |
| bg-right-top | background-position: right top; | !nvue |
| bg-top | background-position: top; | !nvue |
| | | |
| **背景图像重复** | | |
| bg-repeat | background-repeat: repeat; | !nvue |
| bg-repeat-x | background-repeat: repeat-x; | !nvue |
| bg-repeat-y | background-repeat: repeat-y; | !nvue |
| bg-repeat-round | background-repeat: round; | !nvue |
| bg-repeat-space | background-repeat: space; | !nvue |
| | | |
| **背景图像大小** | | |
| bg-auto | background-size: auto; | !nvue |
| bg-cover | background-size: cover; | !nvue |
| bg-contain | background-size: contain; | !nvue |
| | | |
| **背景图像原点** | | |
| bg-origin-border | background-origin: border-box; | !nvue |
| bg-origin-padding | background-origin: padding-box; | !nvue |
| bg-origin-content | background-origin: content-box; | !nvue |
### 边框
| | 样式参考 | 说明 |
| ---------------------------- | ------------------------------- | ----- |
| **边框圆角** | | |
| rounded-none | border-radius: 0px; | |
| rounded-full | border-radius: 9999px; | |
| rounded-{0~32} | border-radius: {0~32}px; | |
| rounded-{0~64}r | border-radius: {0~64}rpx; | |
| rounded-{0~100}p | border-radius: {0~100}%; | |
| | | |
| **边框宽度** | | |
| border-{0-10} | border-width: {0-10}px; | |
| border-{0-20}r | border-width: {0-20}rpx; | |
| border-top-{0-10} | border-top-width: {0-10}px; | |
| border-top-{0-20}r | border-top-width: {0-20}rpx; | |
| border-right-{0-10} | border-right-width: {0-10}px; | |
| border-right-{0-20}r | border-right-width: {0-20}rpx; | |
| border-bottom-{0-10} | border-bottom-width: {0-10}px; | |
| border-bottom-{0-20}r | border-bottom-width: {0-20}rpx; | |
| border-left-{0-10} | border-left-width: {0-10}px; | |
| border-left-{0-20}r | border-left-width: {0-20}rpx; | |
| | | |
| **边框颜色** | | |
| border-transparent | border-color: transparent; | |
| border-current | border-color: currentColor; | !nvue |
| border-fff
border-white | border-color: #fff; | |
| border-000
border-black | border-color: #000; | |
| border-{111-999} | border-color: #{111-999}; | |
| | | |
| **边框样式** | | |
| border-solid | border-style: solid; | |
| border-dashed | border-style: dashed; | |
| border-dotted | border-style: dotted; | |
| border-double | border-style: double; | !nvue |
| border-none | border-style: none; | !nvue |
### 特效
| | **样式参考** | 说明 |
| --------------- | ----------------- | -------- |
| **Opacity** | | |
| opacity-{0~100} | opacity: {0~100}; | 步长为 5 |
### 布局
#### Display
| | **样式参考** | 说明 |
| ------------ | ---------------------- | ----- |
| **块级元素** | | |
| block | display: block; | !nvue |
| inline-block | display: inline-block; | !nvue |
| inline | display: inline; | !nvue |
| contents | display: contents; | !nvue |
| hidden | display: none; | !nvue |
| visible | visibility: visible; | !nvue |
| invisible | visibility: hidden; | !nvue |
#### Flexbox
| | **样式参考** | 说明 |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| **Flex** | | |
| flex | display: flex !important; | !nvue |
| flex-center | nvue:
justify-content: center !important;
align-items: center !important;
!nvue:
display: flex !important;
justify-content: center !important;
align-items: center !important; | |
| | | |
| **Flex 方向** | | |
| flex-row | flex-direction: row !important; | |
| flex-row-reverse | flex-direction: row-reverse !important; | |
| flex-col | flex-direction: column !important; | |
| flex-col-reverse | flex-direction: column-reverse !important; | |
| | | |
| **Flex Wrap** | | |
| flex-wrap | flex-wrap: wrap !important; | |
| flex-wrap-reverse | flex-wrap: wrap-reverse !important; | |
| flex-nowrap | flex-wrap: nowrap !important; | |
| | | |
| **Flex Stretch** | | |
| flex-auto | flex: 1 1 auto; | !nvue |
| flex-initial | flex: 0 1 auto; | !nvue |
| flex-none | flex: none; | !nvue |
| flex-{1~16} | flex: {1-16} !important; | |
| | | |
| **Flex Grow** | | |
| flex-grow-0 | flex-grow: 0; | !nvue |
| flex-grow | flex-grow: 1; | !nvue |
| | | |
| **Flex Shrink** | | |
| flex-shrink-0 | flex-shrink: 0; | !nvue |
| flex-shrink | flex-shrink: 1; | !nvue |
#### Posiioning
| | **样式参考** | 说明 |
| ------------------------------- | ---------------------------------------------------------------- | ----- |
| | | |
| **Order** | | |
| order-first | order: -9999; | !nvue |
| order-last | order: 9999; | !nvue |
| order-none | order: 0; | !nvue |
| order-{0~16} | order: {0~16}; | !nvue |
| | | |
| **Justify Content** | | |
| justify-start | justify-content: flex-start !important; | |
| justify-end | justify-content: flex-end;!important | |
| justify-center | justify-content: center !important; | |
| justify-between | justify-content: space-between !important; | |
| justify-around | justify-content: space-around; | !nvue |
| justify-evenly | justify-content: space-evenly; | !nvue |
| | | |
| **Justify Items** | | |
| justify-items-auto | justify-items: auto; | |
| justify-items-start | justify-items: start; | |
| justify-items-end | justify-items: end; | |
| justify-self-center | justify-self: center; | |
| justify-self-stretch | justify-self: stretch; | |
| | | |
| **Align Items** | | |
| items-start | align-items: flex-start !important; | |
| items-end | align-items: flex-end;!important | |
| items-center | align-items: center;!important | |
| items-baseline | align-items: baseline; | !nvue |
| items-stretch | align-items: stretch !important; | |
| | | |
| **Align Self** | | |
| self-auto | align-self: auto; | !nvue |
| self-start | align-self: flex-start; | !nvue |
| self-end | align-self: flex-end; | !nvue |
| self-center | align-self: center; | !nvue |
| self-stretch | align-self: stretch; | !nvue |
| | | |
| **Place Content** | | |
| place-content-center | place-content: center; | !nvue |
| place-content-start | place-content: start; | !nvue |
| place-content-end | place-content: end; | !nvue |
| place-content-between | place-content: space-between; | !nvue |
| place-content-around | place-content: space-around; | !nvue |
| place-content-evenly | place-content: space-evenly; | !nvue |
| place-content-stretch | place-content: stretch; | !nvue |
| | | |
| **Place Items** | | |
| place-items-auto | place-items: auto; | !nvue |
| place-items-start | place-items: start; | !nvue |
| place-items-end | place-items: end; | !nvue |
| place-items-center | place-items: center; | !nvue |
| place-items-stretch | place-items: stretch; | !nvue |
| | | |
| **Place Self** | | |
| place-self-auto | place-self: auto; | !nvue |
| place-self-start | place-self: start; | !nvue |
| place-self-end | place-self: end; | !nvue |
| place-self-center | place-self: center; | !nvue |
| place-self-stretch | place-self: stretch; | !nvue |
| | | |
| **Position** | | |
| static | position: static; | !nvue |
| fixed | position: fixed !important; | |
| absolute | position: absolute !important; | |
| relative | position: relative !important; | |
| sticky | position: sticky !important; | |
| | | |
| **Top / Right / Bottom / Left** | | |
| inset-0 | top: 0px;
right: 0px;
bottom: 0px;
left: 0px; | |
| inset-px | top: 1px;
right: 1px;
bottom: 1px;
left: 1px; | |
| inset-auto | top: auto;
right: auto;
bottom: auto;
left: auto; | |
| inset-full | top: 100%;
right: 100%;
bottom: 100%;
left: 100%; | |
| top-{0-50} | top: {0-50}px; | |
| top-{1-100}r | top: {1-100}rpx; | |
| right-{0-50} | right: {0-50}px; | |
| right-{1-100}r | right: {1-100}rpx; | |
| bottom-{0-50} | bottom: {0-50}px; | |
| bottom-{1-100}r | bottom: {1-100}rpx; | |
| left-{0-50} | left: {0-50}px; | |
| left-{1-100}r | left: {1-100}rpx; | |
| | | |
| **Floats** | | |
| float-right | float: right; | !nvue |
| float-left | float: left; | !nvue |
| float-none | float: none; | !nvue |
| | | |
| **Clear** | | |
| clear-right | clear: right; | !nvue |
| clear-left | clear: left; | !nvue |
| clear-both | clear: both; | !nvue |
| clear-none | clear: none; | !nvue |
| | | |
| **Object Fit** | | |
| object-contain | object-fit: contain; | !nvue |
| object-cover | object-fit: cover; | !nvue |
| object-fill | object-fit: fill; | !nvue |
| object-none | object-fit: none; | !nvue |
| object-scale-down | object-fit: scale-down; | !nvue |
| | | |
| **Object Position** | | |
| object-bottom | object-position: bottom; | !nvue |
| object-center | object-position: center; | !nvue |
| object-left | object-position: left; | !nvue |
| object-left-bottom | object-position: left bottom; | !nvue |
| object-left-top | object-position: left top; | !nvue |
| object-right | object-position: right; | !nvue |
| object-right-bottom | object-position: right bottom; | !nvue |
| object-right-top | object-position: right top; | !nvue |
| object-top | object-position: top; | !nvue |
| | | |
| **Z-Index** | | |
| z-auto | z-index: auto; | !nvue |
| z-{0~16} | z-index: {0~16} !important; | |
#### 尺寸
| | **样式参考** | 说明 |
| -------------- | ------------------------ | ---- |
| **width** | | |
| w-{0~750}r | width: {0~750}rpx; | |
| w-{0~500} | width: {0~500}px; | |
| w-{0~100}p | width: {0~100}%; | |
| | | |
| **height** | | |
| h-{0~750}r | height: {0~750}rpx; | |
| h-{0~500} | height: {0~500}px; | |
| h-{0~100}p | height: {0~100}%; | |
| | | |
| **Box Sizing** | | |
| box-border | box-sizing: border-box; | |
| box-content | box-sizing: content-box; | |
### 间隔
| | **样式参考** | 说明 |
| ----------- | ----------------------------------------------------------- | ---- |
| **Padding** | | |
| pt-{0~100} | padding-top: {0~100}px; | |
| pt-{1~200}r | padding-top: {1~200}rpx; | |
| pr-{0~100} | padding-right: {0~100}px; | |
| pr-{1~200}r | padding-right: {1~200}rpx; | |
| pb-{0~100} | padding-bottom: {0~100}px; | |
| pb-{1~200}r | padding-bottom: {1~200}rpx; | |
| pl-{0~100} | padding-left: {0~100}px; | |
| pl-{1~200}r | padding-left: {1~200}rpx; | |
| p-{0-100} | padding: {0~100}px; | |
| p-{1-200}r | padding: {1~200}rpx; | |
| px-{0-100} | padding-right: {0\~100}px;
padding-left: {0\~100}px; | |
| px-{1-200}r | padding-right: {1\~200}rpx;
padding-left: {1\~200}rpx; | |
| py-{0-100} | padding-top: {0\~100}px;
padding-bottom: {0\~100}px; | |
| py-{1-200}r | padding-top: {1\~200}rpx;
padding-bottom: {1\~200}rpx; | |
| | | |
| **Margin** | | |
| mt-{0~100} | margin-top: {0~100}px; | |
| mt-{1~200}r | margin-top: {1~200}rpx; | |
| mr-{0~100} | margin-right: {0~100}px; | |
| mr-{1~200}r | margin-right: {1~200}rpx; | |
| mb-{0~100} | margin-bottom: {0~100}px; | |
| mb-{1~200}r | margin-bottom: {1~200}rpx; | |
| ml-{0~100} | margin-left: {0~100}px; | |
| ml-{1~200}r | margin-left: {1~200}rpx; | |
| m-{0-100} | margin: {0~100}px; | |
| m-{1-200}r | margin: {1~200}rpx; | |
| mx-{0-100} | margin-right: {0\~100}px;
margin-left: {0\~100}px; | |
| mx-{1-200}r | margin-right: {1\~200}rpx;
margin-left: {1\~200}rpx; | |
| my-{0-100} | margin-top: {0\~100}px;
margin-bottom: {0\~100}px; | |
| my-{1-200}r | margin-top: {1\~200}rpx;
margin-bottom: {1\~200}rpx; | |
| mx-auto | margin-right: auto;
margin-left: auto; | |
## 5️⃣ 问题？
1. 为什么没有 `max-width` 、`min-width`、`max-height`、`min-height` 等类？
付出 > 收益，性价比不高，项目中用到的地方不多。增加之后文件增大了 100 多 kb。没有必要。
## 6️⃣ 更新日志（CHANGELOG）
### 0.1.0
- 文档修正
### 0.0.8
- 文档增加插件市场下载方式安装使用，支持 `uni_modules`
### 0.0.7
- 移除 nvue 下的断字相关的类，避免警告
- break-normal
- break-words
- break-all
### 0.0.6
- 文档颜色描述修正
### 0.0.5
- 修正文本溢出行数无效
### 0.0.4
- 增加文本溢出功能类
- 增加 nvue 下 lines-{1~8} 功能类
### 0.0.3
- 文档颜色描述修正
- 增加边框颜色 border-black
- 增加边框颜色 border-{000~999}
### 0.0.2
- 增加背景色 bg-{000~999}
- 增加背景色 bg-black
- 增加文字颜色 text-fff、text-white
- 增加文字颜色 text-black
### 0.0.1
- 第一个可用版本