nanhuashi_applet/uni_modules/windi-css-uniapp

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-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

• 第一个可用版本