❤
npm
Sign UpSign In

@limm/windi-css-uni

0.1.0 • Public • Published

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: {18};
!nvue
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: {18};
空格
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

  • 第一个可用版本

Readme

Keywords

Package Sidebar

Install

npm i @limm/windi-css-uni

Repository

github.com/SunSeekerX/uni-app-starter/tree/main

Homepage

github.com/SunSeekerX/uni-app-starter/tree/main/packages/windi-css-uni

Weekly Downloads

9

Version

0.1.0

License

UNLICENSED

Unpacked Size

70.2 kB

Total Files

15

Last publish

Collaborators

  • limm
Try on RunKit
Report malware