css属性原子化规范

[jiangjiu]

单位说明

unocss中预设的宽、高、间距等默认单位是rem。1对应0.25rem，以此类推。

项目中可以设置html的font-size为0.53333333vw，这样在750宽度的屏幕上，w-1就对应1px，w-750就对应750px。

(750屏宽时，1vw=7.5px，又因为预设的w-1=0.25rem，故设置根元素font-size为4/7.5=0.5333333vw)

class	w-1	w-2	w-3	w-4	...	w-10	...	w-400	...
Properties	width: 0.25rem;	width: 0.5rem;	width: 0.75rem;	width: 1rem;	...	width: 2.5rem;	...	width: 100rem;	...

原子化属性

下表列举了项目中常用的css属性，根据改写原子化的难易程度分为三类： a.适合使用原子类的属性，无痛迁移 b.中间态属性(使用原子类写法略复杂，需要配合自定义规则简化) c.不适合使用原子类的属性，保持原来写法

	css样式	原子化类名	Properties	说明
尺寸	width	w-375	width: 93.75rem;	任意px值
	w-24%	width: 24%;	任意百分比值
w-fullw-screenw-fit	width: 100%;width: 100vw;width: fit-content;	一些预设类名(更多参见官方文档)
	height	h-10	height: 2.5rem;
	max-width	max-w-1	max-width: 0.25rem;
	min-width	min-w-1	min-width: 0.25rem;
	max-height	max-h-1	max-height: 0.25rem;
	min-height	min-h-1	min-height: 0.25rem;
	box-sizing	box-borderbox-content	box-sizing: border-box;box-sizing: content-box;
间距	margin	m-4	margin: 1rem;	整体margin
	my-4	margin-top: 1rem;margin-bottom: 1rem;	上下margin
	mx-4	margin-left: 1rem;margin-right: 1rem;	左右margin
	mt/mr/mb/ml	margin-top/margin-right/margin-bottm/margin-left	单个margin
	mt--20	margin-top: -5rem;	负值margin-top
	mx-auto	margin-left: auto;margin-right: auto;	块元素水平居中使用mx-auto 代替 margin: 0 auto;
	padding	p-10	padding: 2.5rem;
边框	border-width	border-1	border-width: 1px;
	border-color	border-#fffbd3	--un-border-opacity: 1;border-color: rgba(255, 251, 211, var(--un-border-opacity));
	border-style	border-solid	border-style: solid;
	border-radius	rounded-30	border-radius: 7.5rem;
文字	font-size	text-30	font-size: 7.5rem;
	color	text-#ff0000	--un-text-opacity:1;color:rgba(255,0,0,var(--un-text-opacity));	自定义颜色
	text-gray-500	--tw-text-opacity: 1;color:rgba(107, 114, 128,var(--tw-text-opacity));	预设颜色，可以通过theme修改将项目常用的颜色配置到主题中
	text-align	text-center	text-align: center;
	vertical-align	align-baseline	vertical-align: baseline;
	font-family	font-serif	font-family: ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;	预设字体类名
	font-Barlow	font-family: Barlow Bold;	自定义字体，需要在theme中配置
	font-weight	font-400font-bold	font-weight: 400;font-weight: 700;
	line-height	leading-38	line-height: 9.5rem;	行高设置固定值
	leading-normal	line-height: 1.5;	行高设置倍数
	font-style	italic	font-style: italic;
	text-indent	indent-40	text-indent: 10rem;
	indent-2em	text-indent: 2em;
	letter-spacing	tracking-2	letter-spacing: 0.5rem;
	text-decoration	underline	text-decoration-line: underline;	装饰线的其他设置参考官方文档
	white-space	whitespace-nowrap	white-space: nowrap;
单行文字溢出...	text-overflow	truncate	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;	预设提供了单行文本超出省略号
多行文字溢出	line-clamp	line-clamp-2	overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;	预设提供了多行文本超出省略号
定位	position	relativeabsolutefixed	position: relative;position: absolute;position: fixed;
	top / right / bottom / left	top-4	top: 1rem;
	z-index	z-2	z-index: 2;
布局	display	blockinline-block	display: block;display: inline-block;
	box-sizing	box-borderbox-content	box-sizing: border-box;box-sizing: content-box;
	overflow	overflow-scrolloverflow-hiddenoverflow-x-hidden	overflow: scroll;overflow: hidden;overflow-x: hidden;
	visibility	visibleinvisible	visibility: visible;visibility: hidden;
flex布局	flex	flex	display: flex;
	flex-direction	flex-rowflex-col	flex-direction: row;flex-direction: column;
	flex-wrap	wrapnowrap	flex-wrap: wrap;flex-wrap: nowrap;
	justify-content	justify-centerjustify-between	justify-content: center;justify-content: space-between;
	align-items	items-startitems-center	align-items: flex-start;align-items: center;
	flex横向排列-居中	flexitems-centerjustify-center	display: flex;align-items: center;justify-content: center;	很常用的布局可以用shortcuts缩写
块元素translate水平垂直居中		absoluteleft-50%top-50%translate--50%	position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);	很常用的布局可以用shortcuts缩写
透明度	opacity	opacity-50	opacity: 0.5;
鼠标事件	pointer-events	pointer-events-none	pointer-events: none;
背景	background-color	bg-#ef2043	--un-bg-opacity: 1;background-color: rgba(239, 32, 67, var(--un-bg-opacity));
	background-repeat	bg-no-repeatbg-repeat-y	background-repeat: no-repeat;background-repeat: repeat-y;
	background-position	bg-topbg-left-top	background-position: top;background-position: left top;
	bg-[position:20_10]	background-position: 5rem 2.5rem;	任意值background-position
	background-size	bg-containbg-cover	background-size: contain;background-size: cover;	预设的类名
	bg-[length:379_200]	background-size: 94.75rem 50rem;	任意值background-size
	bg-[length:100%]	background-size: 100%;
背景渐变		bg-gradient-to-bfrom-[#fffff2_20%]to-[#fefbc2_70%]	background-image: linear-gradient(to bottom, #fffff2 20%, #fefbc2 70%);
文字渐变		bg-gradient-to-bbg-clip-texttext-transparentfrom-[#fffad3_25%]to-[#fffd7f_75%]		将通用属性缩写，简化使用
文字阴影	text-shadow	text-shadow-[0_2px_2px_#ff001b]	text-shadow: 0 2px 2px #ff001b;	自定义值通过[]实现更复杂的阴影效果建议使用css
元素阴影	box-shadow	shadow-[0_2px_2px_#ff001b]	box-shadow: 0 2px 2px #ff001b;	自定义值通过[]实现更复杂的阴影效果建议使用css
伪类、伪元素
背景图片	background-image			css实现
多个背景	background		background-image: url("@/img/home-bg.jpg"), linear-gradient(to bottom, #ffece1 1623px, #ffdcc2 90%);	css实现
动画	transform			预设提供了transform各属性的类名但不支持简写 还是用css实现吧
	transition			css实现
	animation			css实现



常见效果

translate实现水平垂直居中

css实现	原子化类名实现
position: absolute;position: absolute;top: 50%;transform: translate(-50%, -50%);	absolute left-50% top-50% translate-50%



原子化类名实现的文字渐变较复杂，使用shortcuts简化

{
    shortcuts: [
        // dynamic shortcuts
        [/^text-gradient-to-(.*)$/, ([, c]) => `bg-gradient-to-${c} bg-clip-text text-transparent`],
    ],
}

text-gradient-to-b 
from-[#fffad3_25%] 
to-[#fffd7f_75%] 

关于背景图

简单场景：使用背景图最普遍场景是：将宽高指定为图片尺寸后，设置该图片作为背景。

width: 174px;
height: 176px;
background-image: url('@img/empty-icon.png');
background-repeat: no-repeat;
background-size: 100%;

background-image用原子化类名实现有点复杂（还没搞定路径和打包），再者图片很少能复用，所以background-image用css书写。

可以为background-repeat: no-repeat; background-size: 100%; 这两个经常复用的样式设置shortcuts。

{
    shortcuts: [{'bg-common': 'bg-[length:100%] bg-no-repeat'}],
}

这样，设置普通的背景图直接使用bg-common，再单独使用css设置background-image即可。

复杂场景：设置两张背景图、background-position任意值等较复杂的情况，直接用css写吧。