代码拉取完成,页面将自动刷新
+ m is margin
+ p is padding
+ h is height
+ w is width
+ y代表上下tb x代表左右lr组合方向
+ tblr代表上下左右单方向
+ 权重优先级 tblr单项 > xy双向组合 > 四项组合
+ 伪类后跟任意属性
hover|link|visited|active|focus|focus-within 等伪类 后接属性 如 hover:c-red active:w-233
内置三种媒体查询 如果需要覆盖或自定义添加 请看进阶使用
sm : '(min-width: 640px)',
md : '(min-width: 768px)',
lg : '(min-width: 1024px)',
xl : '(min-width: 1280px)'
如 sm@bg-fff lg@w-2333 xl@m-t-10
即可在不同屏幕大小中正确使用媒体查询支持全部属性 如需要与伪类配合使用 语法如下 <媒体查询>@<伪类>:<属性>
+ m-16 16代表正数
+ m-m-16 -m-16代表负数(部分属性支持)
+ 数值全部支持小数 如 m-t-0.222vh w-33.333333p
+ p为百分比%的缩写。默认不传为px
+ v为可变单位 例如 w-10 => 10 / 16 => width: 0.625rem (在配置文件中编写 <big>vToAny</big> 生效)
const UNIT_ENUM = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', 'p', 'rpx']
const UNIT_ENUM_STR = UNIT_ENUM.join('|')
+ 大部分属性符合key-value形式,部分属性会兼容简写,如dispaly-flex / d-flex
+ 部分属性为常用组合属性,如正方形 square-80(width:80px;height:80px) flex-center-center等
.w-10p{width:10%}
.w-375{width:375px}
new RegExp(`^[wh]-(0|[1-9]\\d*)(${UNIT_ENUM_STR})?$`)
.max-w-100 {max-width:100px;}
.min-w-300rem {min-width:300rem;}
.max-h-100vh {max-height:100vh}
new RegExp(`^(min|max)-[wh]-(0|[1-9]\\d*)(${UNIT_ENUM_STR})?$`)
.w-10p{width:10%}
.w-375{width:375px}
.square-80{width:80px;height:80px}
new RegExp(`^square-(0|[1-9]\\d*)(${UNIT_ENUM_STR})?$`)
.m-16 {margin:16px}
.m-b-32rem{margin-bottom:32rem}
.m-x-m-22rem {margin-left:-22rem;margin-right:-22rem;}
.p-x-24{padding-left:24px;padding-right:24px}
.mx-20{margin-left:20px;margin-right:20px}
.px-10{padding-left:10px;padding-right:10px}
new RegExp(`^[mp](-|)(([trblxy])-)?(m-)?(0|[1-9]\\d*)(${UNIT_ENUM_STR})?$`)
.z-index-9{z-index:9}
.z-index-m-9{z-index:-9}
/^z-index-(m-)?(0|[1-9]\d*)$/
.flex-1{flex:1}
.flex-none{flex:none}
.flex-auto{flex:auto}
/^flex-(null|auto|(0|[1-9]\d*))$/
.flex-space-between-center {
display:flex;
justify-content:space-between;
align-items:center;
}
.flex-center-center {
display:flex;
justify-content:center;
align-items:center;
}
new RegExp(`^flex-(${JUSTIFY_CONTENT_ENUM_STR})-(${ALIGN_ITEMS_ENUM_STR})$`)
.flex-wrap-inherit{flex-wrap:inherit;}
.flex-wrap-initial{flex-wrap:initial;}
.flex-wrap-nowrap{flex-wrap:nowrap;}
.flex-wrap-wrap-reverse{flex-wrap:wrap-reverse;}
.flex-wrap-wrap{flex-wrap:wrap;}
/^flex-wrap-(inherit|initial|nowrap|wrap|wrap-reverse)$/
.justify-content-space-between {justify-content:space-between;}
new RegExp(`^justify-content-(${JUSTIFY_CONTENT_ENUM_STR})$`)
.align-items-center {align-items:center}
new RegExp(`^align-items-(${ALIGN_ITEMS_ENUM_STR})$`)
.flex-direction-column{ flex-direction:column; }
.flex-column{ flex-direction:column; }
/^(flex-direction|flex)-(row|row-reverse|column|column-reverse)$/
.text-align-center {text-align:center}
.text-center {text-align:center}
/^(text-align|text)-(start|end|left|right|center|justify|match-parent)$/
.lh-14{line-height:14px;}
.lh-normal{line-height:normal;}
.line-height-14rem{line-height:14rem;}
new RegExp(`^(lh|line-height)-(((0|[1-9]\\d*)(${UNIT_ENUM_STR})?)|normal|unset|inherit|initial)$`)
.position-relative{position:relative}
/^position-(static|relative|sticky|unset|absolute|fixed|inherit|initial)$/
.l-283{left:283px;}
.top-0px{top:0;}
.right-m-672{right:-672px;}
new RegExp(`^[trbl]-(m-)?(0|[1-9]\\d*)(${UNIT_ENUM_STR})?$`)
.fs-22{font-size:22px}
.font-size-22rem{font-size:22rem}
new RegExp(`^(font-size|fs)-(0|[1-9]\\d*)(${UNIT_ENUM_STR})?$`)
.fw-bolder{font-weight:bolder}
.font-weight-300{font-weight:300}
.fw-900{font-weight:900}
new RegExp(`^(font-size|fs)-(0|[1-9]\\d*)(${UNIT_ENUM_STR})?$`)
.cursor-pointer{cursor:pointer;}
new RegExp(`^cursor-(${CURSOR_ENUM_STR})$`)
.word-break-break-all{word-break:break-all}
/^word-break-(normal|break-all|keep-all|break-word|inherit|initial|unset)$/
.display-none{display:none}
.d-flex{display:flex}
/^(display|d)-(none|inline|block|inline-block|flex|contents)$/
.overflow-x-hidden{overflow-x:hidden;}
.overflow-auto{overflow:auto;}
/^overflow(-[xy])?-(hidden|auto|visible|scroll|inherit)$/
new RegExp(
`^(?<type>color|c|text|bg|background|border-color|border-c)-(?<color>(#?([a-fA-F0-9]{8}$|[a-fA-F0-9]{6}|[a-fA-F0-9]{3}))|${getColorsKey().join('|')})(-(?<opacity>1|([1-9]\\d?)))?$`)
.c-red{color:rgba(255,0,0,1)}
.color-43ad7f-25{color:rgba(67,173,127,0.25)}
.bg-black-35{background:rgba(0,0,0,0.35)}
.background-active-43ad7f-35:active{background:rgba(67,173,127,0.35)}
.border-c-black-35{border-color:rgba(0,0,0,0.35)}
.border-color-active-43ad7f-35:active{border-color:rgba(67,173,127,0.35)}
opacity-20{ opacity: 0.2 }
.letter-spacing-4{letter-spacing:4px}
.letter-spacing-4rem{letter-spacing:4rem}
new RegExp(`^letter-spacing-(m-)?(0|[1-9]\\d*)(${UNIT_ENUM_STR})?$`)
.circle{border-radius:50%;}
/^circle$/
.flex-grow-1{flex-grow:1}
.flex-shrink-0{flex-shrink:0}
.flex-shrink-initial{flex-shrink:initial}
/^flex-(shrink|grow)-((0|[1-9]\d*)|initial|inherit)$/
.flex-basis-20p{flex-basis:20%}
.flex-basis-20{flex-basis:20px;}
.flex-basis-auto{flex-basis:auto;}
new RegExp(`^flex-basis-((0|[1-9]\\d*)(${UNIT_ENUM_STR})?|initial|inherit|auto)$`)
.border-2{
border-width: 2px;
border-style: solid;
border-color: black;
}
.border-w-x-2em{
border-width: 2em;
border-style: solid;
border-color: black;
}
new new RegExp(`^(border|border-width|border-w)-([trblxy]-)?(0|[1-9]\\d*)(${UNIT_ENUM_STR})?$`)
.border-radius-4{border-radius:4px}
.br-20p{border-radius:20%}
new RegExp(`^(border-radius|br)-(0|[1-9]\\d*)(${UNIT_ENUM_STR})?$`)
.border-style-dashed{border-style:dashed}
/^border-style-(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit)$/
.object-fit-fill{object-fit:fill}
/^object-fit-(fill|contain|cover|none|scale-down|inherit|initial|revert|unset)$/
text-align-last
.text-align-last-right{text-align-last:right;}
/^(text-align-last|text-last)-(auto|left|right|center|justify|start|end|initial|inherit)$/
文本修饰
.text-decoration-underline{text-decoration:underline}
.text-overline{text-decoration:overline}
/^(text-decoration|text)-(none|underline|overline|line-through|blink|inherit)$/
鼠标选择
.user-select-none{user-select:none}
.select-none{user-select:none}
.select-auto{user-select:auto}
/^(user-)?select-(none|auto|text|all|contain|element)$/
文字超出换行
.ellipsis {
display:inline-block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.ellipsis-2 {
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.text-ellipsis-2 {
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
regExp: /^(text-)?ellipsis-[1-9]\d*$/
间距
.gap-20 {
column-gap:20px;
row-gap:20px;
}
.gap-20p {
column-gap:20%;
row-gap:20%;
}
.gap-unset {
column-gap:unset;
row-gap:unset;
}
regExp: /^gap-((<数字><单位>?)|inherit|initial|unset)*$/
列间距
.column-gap-20 {
column-gap:20px;
}
.column-gap-20p {
column-gap:20%;
}
.column-gap-unset {
column-gap:unset;
}
regExp: /^column-gap-((<数字><单位>?)|inherit|initial|unset)*$/
行间距
.row-gap-20 {
row-gap:20px;
}
.row-gap-20p {
row-gap:20%;
}
.row-gap-unset {
row-gap:unset;
}
regExp: /^row-gap-((<数字><单位>?)|inherit|initial|unset)*$/
.visibility-hidden {
visibility: hidden;
}
.visibility-visible {
visibility: visible;
}
关于 overrideRules 可覆盖属性如下
overrideRules: {
/**
* 如需覆盖自带属性 则属性名 相同
* 此处值 为 object 或者 函数 函数必须返回相同格式的对象
* 函数可接受 自带工具 工具有
* textToRgbText 将16进制颜色 或定义的颜色转为rgba语法
* getColorsKey 获取所有定义的颜色的key数组
* getColors 获取所有定义的颜色的对象
* UNIT_ENUM_STR 捕获单位的正则字符串
* NONNEGATIVE_NUMBER_REGEX_STR 捕获数字的正则字符串
* DIRECTION_MAP 方向定义的 map
*/
zIndex: ({ textToRgbText, getColorsKey, getColors, UNIT_ENUM_STR, NONNEGATIVE_NUMBER_REGEX_STR, DIRECTION_MAP }) => {
return {
/**
* 此处必须存在 regExp 为正则表达式 或 函数 函数必须返回正则表达式
* 此处必须存在 render 函数
* 入参 为 字符串mathch 正则表达式的结果 (只有匹配上的才会调用render)
* render 函数必须返回 name:String order:Number css:Array<String>
* 将会使用 render 返回的结果 生成css
* 如果导出 num 则会按照num 组内渲染排序 与其他css 排序无关
* 如果捕获组有 unit 会自动处理单位问题
*/
regExp: /^zindex-(?<isMinus>m-)?(?<num>0|[1-9]\d*)$/,
render ({ groups }) {
let { isMinus, num } = groups
if (isMinus) {
num = 0 - num
}
return { name: 'zIndex', order: 190, num, css: [`z-index: ${num}] }
}
}
}
},
mediaQueries: {
// 前面为前缀 后面为媒体属性
// 属性相同则覆盖自带属性
sm: '(min-width: 640px)',
md: '(min-width: 768px)',
lg: '(min-width: 1024px)',
xl: '(min-width: 1280px)'
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。