windi-css-uni

1️⃣ 简介

Github：https://github.com/SunSeekerX/uni-app-starter/tree/main/packages/windi-css-uni

这是一些 css 的简写类名的库，用于快速开发 uni-app。适用于 vue+nvue 文件。类名的设计参考了 windicss 的类名。

大部分效果可以参考 https://cn.windicss.org/guide/ 预览。

在写代码的过程中，写 css 是非常头疼的事情，例如：

1. 命名；这应该是所有程序员的痛。
2. 写 dom 不能直接写 css；html 和 css 通常不在一块，需要滑动很长才能找到 css 定义的地方。
3. 很多重复定义；像 diaplay: flex; 这样的代码在 css 中写了太多太多

缺点也很明显

1. 增加了一些项目根本没有用到的 css 类
2. 可读性不好
3. 有一定的学习成本和记忆成本

有舍有得，自行取舍。

2️⃣ 快速上手

安装

npm

npm i @limm/windi-css-uni
# or
yarn add @limm/windi-css-uni

插件市场

插件市场地址：https://ext.dcloud.net.cn/plugin?name=windi-css-uniapp

导入

~~推荐全部引入，开启 treeshaking 会自动裁剪没有用到的类~~，截至目前，css 裁剪没有方案。

${app}/App.vue style 标签最上方导入

// 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- 这是全局的前缀，为了防止和其他库或者你自己定义的样式冲突。

<view class="wd-flex-row wd-justify-between wd-items-center wd-leading-34">
  <text class="wd-text-fff wd-text-16 wd-font-bold">{{ item.name }}</text>
</view>

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-000text-black | color: #000; | | | text-ffftext-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;!nvueoverflow: hidden;-o-text-overflow: ellipsis; | | | overflow-ellipsis | text-overflow: ellipsis;!nvue-o-text-overflow: ellipsis; | | | overflow-clip | !nvueoverflow: clip;nvuetext-overflow: clip; | | | | | | | 行数 | | | | lines-{1~8} | nvuelines: {1~8};!nvuedisplay: -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-fffbg-white | background-color: #fff; | | | bg-000bg-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-fffborder-white | border-color: #fff; | | | border-000border-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

• 第一个可用版本