手撸一套原子类css(类似tailwindcss、unocss、windcss)

1 说明

原子类css用起来嘎嘎爽，像tailwindcss、unocss、windcss等构建开发小项目贼快了，uniapp项目普遍都比pc端项目小，而且要兼容多端开发的特点，项目小、快速开发的特点比较突出。

由于tailwindcss、unocss、windcss等在移动端的使用体验目前不太友好，比如对移动端兼容性不太好，如.w-1/2在小程序端属于特殊字符，会报错；还会存在特殊报错;再如tailwindcss的单位是rem换算其它单位复杂，但是unocss可以在配置文件种的rules种使用正则生成样式，并且改变单位，有兴趣的可以去官网看下；

基于以上原因，那就自己用最少的代码手敲一套原子类css，共计约1100个左右的常用样式；

关于增加1100个左右的样式会不会增加项目体积，新项目的大小约8kb,加上1100个样式后为45kb；

github仓库地址：wfxt0911/atomicClass: 原子类css (github.com)

如果该示例对你有启发，希望您给个Star

uniapp插件市场地址：插件市场对应地址

1.1 使用方法

都是最基础的scss，其中/src/styles/generate.scss是循环生成的样式，/src/styles/expand.scss是其它常用且无法循环生成的样式

直接在App.vue种引入即可，请注意增加lang="scss"属性

<style lang="scss">
/*每个页面公共css */
@import './styles/generate.scss';
@import './styles/expand.scss';
</style>

1.2 generate配置项说明

2 类名详情

2.1.宽度、高度

宽度和高度的使用完全一致，只需要字母w替换成h即可，其中w-p-{val}的p代表的意思是precentage百分比的意思；

tailwindcss的取名为.w-1/2,但是/字符会在wx小程序等不兼容,故使用.w-p-1来代替

2.2 margin、padding、border

margin、padding、border使用完全一致；m为margin;p为padding,border为border

示例：p-2;px-3;pr-3;border-3;border-r-3;border-l-3;

2.3 background-color、color

background-color和color使用完全一致，只需要bg字母换成text即可，如text-black、text-blue-3 ；

{val}值越大，颜色越浅色；

默认支持5种颜色，可自行拓展；如下图所示拓展pink的示例;

//颜色数组，可拓展，下方2个数组长度必须一致
$color_name_list: "blue", "green", "yellow", "red", "gray";
$color_list: #007aff, #4cd964, #f0ad4e, #dd524d, #636e72;

//拓展多一个颜色pink
$color_name_list: "blue", "green", "yellow", "red", "gray","pink";
$color_list: #007aff, #4cd964, #f0ad4e, #dd524d, #636e72,#f78fb3;

2.4 border-radius 、font-size

如下所示,共计"xs", “sm”, “base”, “lg”, “xl”, “2xl”, “3xl”, “4xl”, "5xl"九种尺寸;

border-radius 与font-size的用法完全一致；

同样您也可以自己拓展，拓展方法如同bg拓展;

$size_name_list: "xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl";
$text_size_lset: 12, 13, 14, 16, 18, 24, 36, 48, 56;//圆角
$rounded_size_lset: 5, 8, 10, 12, 16, 24, 36, 48, 56;//字体大小

2.5 定位相关

2.5.1方向

top\left\right\bottom使用方法完全一致

2.2.2其它

完全参照tailwindcss命名

2.6 flex布局

完全参照tailwindcss命名

2.7 浮动

2.8元素样式

完全参照tailwindcss命名

2.9 字体拓展

完全参照tailwindcss命名

2.10 行高

这篇好文章是转载于：学新通技术网