vite-plugin-moxucss
v1.2.5
Published
你是否对原子类过于零散感到难受,moxucss8个类名解决你80%的css问题
Maintainers
moxuleReadme
Moxucss
传统的css命名困难，原子类解决了命名困难，但是要记忆的类命名变多了，moxucss只有八个类名，解决你不想记忆类名的烦恼，而且简单易学，你会调用函数你就会moxucss，一切css问题都可以在html中解决，解决你调试css的烦恼，让你有更多时间摸鱼。
moxucss内置的八个函数类都是根据css的功能进行整合的，对应着八个概念，盒子box()，felx布局flex()，字体font()，边距mp()，图层layer()，显示模式show()，边缘edge()，文本text()。
moxucss的css不是通过预设的css类名来实现的，而是通过正则匹配实时生成。
moxucss还有着变量，主题完全可以通过定义变量来实现。 moxucss可以自定义函数类，当moxucss已有的类名不满足你的需求时，你可以定义你的函数类来解决问题，只要你够闲，你完全可以手撸一套原子类。
支持vue,react,uniapp等只要用moxucss语法的都行
- Moxucss8个函数类
- 过渡/变换/动画 看看就得了，仅供参考，网上有更优秀的动画框架
- 传参语法 函数类的使用这个很重要
- 媒体查询
- 定义行内函数类 行内函数类是唯一全局生效的，其他函数类只能在class=“”生效
- 选择器
- 配置文件 全局定义函数类和变量在这里
- moxucss
- github
安装使用
安装：
npm i vite-plugin-moxucss -D使用：
// ./vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import moxucssPlugin from 'vite-plugin-moxucss'
import { join } from "path";
export default defineConfig({
// vue reate uniapp都支持
// moxucss要放在框架插件的前面，不然拿不到原文件
plugins: [
moxucssPlugin({
// 生成css路径
outputPath: join(__dirname, './src/moxucss.css'),
// 添加识别的文件,以下默认支持,可以不写
inputFile: ['vue','jsx','tsx']
}),
vue(),
]
})
在main.js入口文件导入moxucss.css文件:
// ./src/main.js
import { createApp } from 'vue'
import App from './App.vue'
// 导入生成的css
import './moxucss.css'
createApp(App).mount('#app')
Moxucss 内置函数类
box(宽度，高度，背景，圆角)
<div class="box(100,100,#0)"></div> <div class="box(100,100,#0,50%)"></div> <div class="box(100,100,#0,20/20/tr)"></div>flex(flexbox，flexItem，flex-direction，align-self，order，flex-wrap)
- 可无序传参
- flex轴语法
<!-- flex轴的参数语法点上面的连接看 --> <!-- flex布局在moxucss中，默认换行 --> <!-- 上下左右居中 --> <div class="flex(xcc)"></div> <!-- 多个侧轴上下左右居中 --> <div class="flex(xcc-s)"></div> <!-- flex：1 1 10px 或 none/auto --> <div class="flex(1/1/10px)"></div> <div class="flex(auto)"></div> <!-- 占1份的同时,控制子元素上下左右居中 --> <div class="flex(1,xcc)"></div> <!-- flex-direction:row-reverse css怎么写这就怎么传--> <div class="flex(row-reverse)"></div> <!-- { s:'flex-start', e:'flex-end', c:'center', d:'stretch', b: 'baseline'} --> <!--上面的对象，key就是简写，value就是全写 --> <!-- align-self:center --> <div class="flex(self-c)"></div> <div class="flex(self-center)"></div> <!-- order:1 横杠接数值就行 --> <div class="flex(order-1)"></div> <!-- flex-wrap：nowrap css怎么写这就怎么传 --> <div class="flex(nowrap)"></div>font(字体大小，颜色，加粗，行高)
<!-- 这个看标题就知道怎么传，下面只写特例 --> <!--加粗可传参数首字母或数值--> <div class="font(20,#f00,b,20)"></div> <div class="font(20,#f00,700,20)"></div> <!-- 因为是有序传参，跨越多个位置传参语法 --> <!-- line-height:20px --> <div class="font(3:20px)"></div>mp(外边距，内边距)
- 有序传参
- 位置语法
<!--参数用/隔开--> <!--margin: 20px--> <div class="mp(20)"></div> <!--margin: 20px 30px--> <div class="mp(20/30)"></div> <!--margin: 20px 30px 40px--> <div class="mp(20/30/40)"></div> <!--margin: 20px 30px 40px 50px--> <div class="mp(20/30/40/50)"></div> <!--trbl四个参数，对应上右下左--> <!--margin-top: 20px--> <div class="mp(20/t)"></div> <!--margin-top: 20px;margin-left: 30px--> <div class="mp(20/30/tl)"></div> <!--trbl参数要和值一一对应，如下属性改变了--> <!--margin-left: 20px;margin-top: 30px--> <div class="mp(20/30/lt)"></div> <!--padding 同上--> <!-- moxucss中padding默认带box-sizing：border-box --> <!-- 需要修改可用 show(content-box) 函数类修改 --> <!--padding-left: 20px;padding-top: 30px--> <div class="mp($,20/30/lt)"></div> <!--$代表空值，可以不传，但`,`要写，因为mp()是有序传参--> <div class="mp(,20/30/lt)"></div>layer(定位类型，位置，z-index)
<!--定位类型可以写首字母，可以写完整--> <!--位置传参：如果跟参数trbl的，值要和trbl对应--> <div class="layer(a,20/40/tl,999)"></div> <div class="layer(absolute,20/40/tl,999)"></div> <!--只传一个值的，上右下左都等同这个值--> <!--top:0,right:0,bottom:0,left:0--> <div class="layer(a,0,999)"></div> <!-- z-index 数值正常写就行 --> <div class="layer(a,0,9999999)"></div>edge(边框，阴影，轮廓)
- 有序传参
- 多值一般用变量解决，不然会很长
- 颜色语法
<!-- 边框 --> <!-- moxucss中border默认带box-sizing：border-box --> <!-- 需要修改可用 show(content-box) 函数类修改 --> <!-- 四个方向的边框 --> <div class="edge(10/solid/#0)"></div> <!-- 上边框 --> <div class="edge(10/solid/#0/t)"></div> <!-- 多位置边框,值要用`_`隔开 --> <div class="edge(10/solid/#0/t_10/solid/#0/b)"></div> <!-- 阴影 box-shadow: h-shadow v-shadow blur spread color inset;--> <!-- 一个阴影 --> <div class="edge($, 0/10/10/10/#f00)"></div> <!-- 多个阴影 --> <div class="edge($, 0/10/10/10/#f00_0/10/10/10/#f00)"></div> <!-- 轮廓 --> <div class="edge(,,#233/dotted/thick)"></div> <!-- 跨位语法 程序员的世界应该从0开始--> <div class="edge(2:#233/dotted/thick)"></div> <!-- 使用变量, 只是举例，moxucss并没有内置这些变量 --> <div class="edge($bk,$yy,$lk)"></div>show(display,overflow,box-sizing)
- 无序传参
<!-- display:['block','none','flex','grid','inline','inline-block'] overflow:['hidden','visible','scroll','auto'] box-sizing:['border-box','content-box'] --> <div class="show(block)"></div> <div class="show(border-box, block)"></div> <div class="show(scroll, border-box, block)"></div> <!-- overflow的值可以加xy来控制裁剪方向 --> <div class="show(hidden-x)"></div> <div class="show(scroll-y)"></div>text(文本对齐，文本裁剪，文本换行，首行缩进)
- 无序传参
<!-- text-align:{ l: 'left', r: 'right', c: 'center', j: 'justify' } text-transform:['capitalize','uppercase','lowercase'] 单行文本裁剪:['ellipsis','clip'] white-space:['normal','pre','nowrap','pre-wrap','pre-line'] --> <!-- 文本右对齐，可全写或简写 --> <div class="text(r)"></div> <div class="text(right)"></div> <!-- 英文文本全部大写 --> <div class="text(uppercase)"></div> <!-- 单行文本裁剪,显示省略号 --> <div class="text(ellipsis)"></div> <!-- 文本不换行 --> <div class="text(nowrap)"></div> <!-- 单词换行 --> <div class="text(word)"></div> <!-- 字母强制换行 --> <div class="text(break)"></div> <!-- 文本首行缩进,默认2em，不可更改单位 --> <div class="text(indent)"></div> <!-- 首行缩进4em,你喜欢跟多少就跟多少，但是不要加单位 --> <div class="text(indent-4)"></div>
过渡/变换/动画
// 直接代码都给你放出来了，动画没有实现
// transform多个使用会被覆盖的，可自定义函数类来实现更复杂的场景
//transition改名move，在行内使用没提示，命名尽可能短，不然打错字找半天
export const css3 = {
translate(val={}){
return [`transform:translate(${val[0] || 0},${val[1] || 0})`]
},
scale(val,raw={}){
return [`transform:scale(${raw[0] || 1},${raw[1] || raw[0]})`]
},
rotate(val={}){
return [`transform:rotate(${val[0] || 0})`]
},
skew(val={}){
return [`transform:skew(${val[0] || 0},${val[1] || 0})`]
},
// move(all, 0.5s) 或 move(width/height, 0.5s)
move(val={}){
return [`transition:${Object.values(val).join(' ')}`]
}
}传参语法
数值和单位
<!-- mocucss默认单位是px,可在配置文件配置默认单位 --> <!-- 单位配置是个函数，设定好单位比例后，你可以做到px转vw等单位 --> <!-- 不带单位，那就用默认单位 --> <div class="box(100,100)"></div> <!-- 带单位，不做处理 --> <div class="box(100px,100vh)"></div>优先级
<!-- 类名后跟上`!`即可 --> <div class="box(100px,100vh,#088)! "></div>变量使用
<!-- 配置对象中定义的变量 , 一定要$开头--> <div class="box(100,100,$bgc) "></div>有序传参和跨位传参
<!-- 参数全部传 --> <div class="box(100,100,#f00,50%)"></div> <!-- 加了空格也没事，但不建议 --> <div class="box(100, 100, #f00, 50%)"></div> <!-- 空值用$符占位,如下不要高度 --> <div class="box(100,$,#f00,50%)"></div> <!-- 或者$也不要，如下宽高都不要--> <div class="box(,,#f00,50%)"></div> <!-- 有时前面3个参数都不要，可以用跨位语法 --> <!-- 标记从0开始 --> <div class="box(3:50%)"></div>颜色语法
<!-- moxucss默认是只支持16进制的颜色值的， 要用rgb等颜色，可以用变量解决，直接写在class中会出错 --> <!-- #f = #ffffff --> <div class="box(2:#f)"></div> <!-- #f1 = #f1f1f1 --> <div class="box(2:#f1)"></div> <!-- #f00 = #ff0000 --> <div class="box(2:#f)"></div> <!-- #ffffff = #ffffff --> <div class="box(2:#ffffff)"></div> <!-- 有透明度的，如下就是降低50%透明度 --> <div class="box(2:#f-5)"></div> <!-- 使用变量来用其他颜色值 --> <!-- { $red:rgba(255,0,0,1)} --> <div class="box(2:$red)"></div>位置语法
<!-- 位置语法适用对象：圆角，内外边距，定位 --> <!-- 想象圆角顺时针旋转45度，就和top,right,bottom,left对上了 --> <!-- top,right,bottom,left的简写就是t,r,b,l --> <!-- 一个值，上右下左全部生效 --> <div class="box(3:50%)"></div> <div class="mp(10)"></div> <div class="layer(10)"></div> <!-- 有方位值的，指定位置生效 --> <div class="box(3:50%/t)"></div> <div class="mp(10/t)"></div> <div class="layer(r,10/t)"></div> <!-- 方位值顺序会影响数值 --> <!-- 这样是margin-top:10,margin-left:20 --> <div class="mp(10/20/tl)"></div> <!-- 换一下方位值顺序，这样就是margin-left:10，margin-top:20--> <div class="mp(10/20/lt)"></div>- flex
<!-- { s: 'flex-start', e: 'flex-end', c: 'center', d: 'stretch', b: 'baseline', 1: 'space-between', 3: 'space-evenly', 4: 'space-around' } --> <!--参数x: 第1位：xy是主轴方向 --> <!--参数c: 第2位：主轴排列方式 --> <!--参数c: 第3位：侧轴排列方式 --> <div class="flex(xcc)"></div> <div class="flex(ycc)"></div> <!-- 多侧轴加`-s`即可 --> <div class="flex(xcc-s)"></div> <div class="flex(ycc-s)"></div> <!-- 其他简写相信你能看懂，134的简写也是有理由的 --> <!-- 如下的结构，你用简写1(两端对齐)，就只有1条间隙 --> <!-- 如下的结构，你用简写3(等分对齐)，就会有3条间隙 --> <!-- 如下的结构，你用简写4(不知道什么对齐)，就会有4条间隙 --> <div class="box(200,200,#886) flex(x1c)"> <div class="box(50,50,#f00)"></div> <div class="box(50,50,#0f0)"></div> </div>
媒体查询
<!-- moxucss内置了6个断点，直接抄了tailwindcss的，哈哈，需要自定义的可以去配置对象配置 -->
<!--
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px', -->
<!-- 使用就是下面那样,在类名前加上即可 -->
<div class="sm:box(50,50,#0f0)"></div>
<div class="md:box(50,50,#0f0)"></div>
<div class="lg:box(50,50,#0f0)"></div>行内定义函数类
<!-- 行内函数类应该遵循就近原则，比如父定子用，自定自用 -->
<!-- 行内函数类的存在是为了利用重复的类名，减少重复的类名 -->
<!-- [moxu-标记]的格式命名，可以用数字，就近原则可以不考虑标记可读性 -->
场景1：基本格式,行内函数类是唯一能全局生效的
<!-- moxucss只会识别在class里出现的函数类，如下你要传递类名给hoverClass -->
<!-- 写box()这样是传递过去也是无效的，用行内函数类包一层即可，写成moxu-001() -->
<!-- 这样做是考虑到你在js里出现同名的函数，然后被误替换掉 -->
<div class="moxu-001()"
moxu-001="box(100,100,#0) font(30,#f)"
hoverClass="moxu-001()"
></div>
场景2：有时大部分参数一样，改变的只是少部分，可以利用传参解决
<!-- @0就是你传进来的第一个参数，以此类推 -->
<!-- 比如在vue中进行类名切换 -->
<div class="moxu-001(#f00,#fff)"
moxu-001="box(100,100,@0) font(30,@1)"
:class="{'moxu-001(#666,#f)': true}"
></div>
场景3：有时用到moxucss类名没有包含的属性，比如伪元素的content
<!-- 下面用到了选择器，不懂可以参考选择器的用法 -->
<div class="box(100,100,#000)"
moxu-001="box(50,50,@0) show(block) {content:''} "
css-select="&:after[moxu-001(#f00)]"
></div>
场景4： 都是函数类了，当然有默认值了
<!-- 用法：@0[变量值] ， css内也可以用-->
<!-- 在css内可能会有一定的问题，比如z-index:999px,会被加上单位 -->
<!-- 解决办法：奇葩语法传值时不要传999， 传999.0就行 -->
<div class="moxu-001()"
moxu-001="box(100, 100, @0[#f00]) {color:@1[#fff]}"
:class="{'moxu-001(#666,#f)': true}"
></div>
选择器
<!-- 语法：通过css-select属性来定义，css有的选择器都能用 -->
<!-- "&"代表父元素，"[]"内写moxucss的类名 -->
场景1：hover改变背景颜色和字体颜色
<!-- 多个类名用空格隔开，太长可以用行内函数类解决 -->
<div class="box(50,20,#f00)"
css-select="&:hover[box(2:#666) font(1:#f)]"
></div>
场景2： 用伪元素
<!-- 要用到行内函数类来解决moxucss没有的元素 -->
<div class="box(100,100,#f00)"
moxu-001="box(50,50,#0) show(block) {content:''}"
css-select="&:after[moxu-001()]"
></div>
场景3：选下一级的元素
<!-- 用"/"分割下一级，以此类推，可以用空格但不建议 -->
<div class="box(50,20,#f00)"
css-select="&:hover/p[font(20,#fff)]"
>
<p>moxucss</p>
</div>
场景4：多个选择器使用，画个爱心吧
<!-- $in是moxucss内置的一个变量，作用是继承父元素的值 -->
<div
class="box(100,100,#f00) mp(60) rotate(45deg) layer(r)"
moxu-002="box($in,$in,$in,50%) layer(a,@0/@1/tl) show(block) {content:''}"
css-select="
&:hover[box(200,200,#088)!]
&:after[moxu-002(-50%,0)]
&:before[moxu-002(0,-50%)]"
></div>
配置文件
export default {
// 定义默认单位
defineUnit: num => num + 'px',
// 这样就可以720px的设计图转vw了
// defineUnit: num => num*(720/100) + 'vw',
//这两项是插件里才用到
outputPath: path.join(__dirname, './'), //生成css的位置
inputFile: ['vue','jsx','tsx'] // 默认识别的文件，需要其他的可自行添加
// 定义前缀，生成css类名时会加上
definePrefix: 'css-',
// 定义断点
defineScreens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
// 定义变量 一定要$开头
defineVar:{
$red: '#f00'
},
// 如果moxucss的8个类名不满足你的需求，可以自定义
defineCss: {
//例子： 定义一个生成正方形的函数类
// 调用 <div class="square(100,#666)"></div>
square(val, raw, config){
// val: 经过处理的参数对象 {0:100px,1:#666}
// raw: 原始的参数对象 {0:100,1:#666}
// config: 配置文件对象
// 原始对象的存在是因为像z-index这样的值会被加上单位
// 所以就可以通过原始对象来拿没处理过的值
// 返回的css数组记得不要带`;`号
return [`width:${val[0]}`,
`height:${val[0]}`,
`background-color:${val[1]}`]
},
// 返回的数据不止是数组，对象能做到更多
// 再定义一个生成正方形的函数类，但是我要hover变色
// 调用 <div class="hoverSquare(100,#666)">moxucss</div>
hoverSquare(val){
return {
width: val[0],
height: val[0],
backgroundColor: val[1],
select:{
// &代表父元素，和scss类似，你可以用上你喜欢的选择器
['&:hover']:{
priority：true, //控制选择器是否加优先级
backgroundColor: '#f00',
moxucss: ['font(40,#f,b)','flex(xcc)']
}
},
//还可以用moxucss自带的类名
moxucss: ['font(20,#f,b)','flex(xcc)']
}
}
}
}