css属性原子化规范
jiangjiu opened this issue · comments
单位说明
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-bfrom-[#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写吧。