想法

2022年12月份的时候萌生了这个想法，到现在开源，花了两个月时间。

自己也在一边使用一边完善种，直到昨天感觉第一个版本应该是差不多了，于是开始开源，希望能够给大家带来些许帮助。

小巧精致，仅45.8kb

地址：https://github.com/vaaagle/VaaWxss

核心

Flex是这个样式库的核心，我们将一些常用样式通过比较规范的规则，包成了‘类’

我们经常需要定义宽高，于是重复的定义类然后在类中设置，至少是3行代码

.demo{

height:50px;

}

现在vaa里面预设了常用宽高和其它常用样式的类，如 fs-12、fw-600、z-index-1、radius-16、w-100p、h-60、f-c-c等，您只需要了解命名规则然后去使用即可，无需再去定义大量属性重复的类。

我们的预想是，您在看页面的时候，在脑海里设计实现方式的时候，就可以通过拼凑这些类的方式直接实现您设计的效果，比如：

现在有个需要实现一个按钮，那怎么设计？

构思：文本元素（text）+ 字符串居中 + 手机屏幕70%的宽度 + 40px高度 + 圆角 + 文字颜色白色 + 背景颜色蓝色 + 字体大小14px + 距离顶部10px

实现： <text class="w-70p h-40 radius-20 c-fff c-bg-blue2 fs-14 mt10">提交</text>

使用前提

需要您对flex布局有些了解