菜单 搜索
首页 前端知识 uniapp\ taro 如何使用 UnoCSS 原子化css

uniapp\ taro 如何使用 UnoCSS 原子化css

2024-01-25 10:01:29 前端知识 前端哥 895 401 我要收藏

unocss-preset-weapp

相较于 tailwindcss 和 windicss, unocss的性能和可扩展性都优于它们

UnoCSS小程序预设 unocss-preset-weapp

内置 transformer 用于兼容小程序

  • transformerClass 转换转义类名，解决小程序不支持`\\`，`\:`，`\[`， `\$`，`\.`等转义类名,保持原子化css的规范去书写class
  • transformerAttributify，用于支持 attributify mode

uniapp-vue3 demo 在线地址​playful-gumption-4bb42b.netlify.app/

使用

uniapp-vue2

使用配置与DEMO

uniapp-vue3

使用配置与DEMO

taro for react vue2 vue3

使用配置与DEMO

原生微信小程序 wxml

使用配置与DEMO

其他

修改 w h 默认单位

unocss-preset-weapp，wh默认单位 `rpx`，例如 
.text-20 {
 font-size: 20rpx;
}

.h-10 {
 height: 10rpx;
}

.top-10 {
 top: 10rpx;
}
设置 whRpx为 false，修改默认单位，按 rem 规则递增
  • unocss.config.ts
import presetWeapp from 'unocss-preset-weapp'
export default defineConfig({
  presets: [
 presetWeapp({
      whRpx: false,
    }),
  ],
})


.text-20 {
 font-size: 160rpx;
}

.h-10 {
 height: 80rpx;
}

.top-10 {
 top: 160rpx;
}

自定义转换规则

如需更改默认的转换规则，可通过  transformRules 进行修改
  • unocss.config.js
import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
import { defineConfig } from 'unocss'

const transformRules = {
  '.': '-d111-',
  '/': '-s111-',
  ':': '-c111-',
  '%': '-p111-',
  '!': '-e111-',
  '#': '-w111-',
  '(': '-b111l-',
  ')': '-b111r-',
  '[': '-f111l-',
  ']': '-f111r-',
  '$': '-r111-',
  ',': '-r222-',
}

const { presetWeappAttributify, transformerAttributify } = extractorAttributify({
  transformRules
})

export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({
      transformRules,
    }),
    // attributify autocomplete
    presetWeappAttributify()
  ],
  transformers: [
    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify({
      transformRules,
    }),

    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass({
      transformRules,
    }),
  ],
})

原子化 css 冲突问题

例如  tmui，自身有一套 原子化 css，导致与 unocss 冲突

  • unocss.config.ts
presetWeapp 配置  prefix,  transformerAttributify 配置  classPrefix 
import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
import { defineConfig } from 'unocss'

const prefix = 'li-'

const { presetWeappAttributify, transformerAttributify } = extractorAttributify({
  classPrefix: prefix
})

export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({
      prefix
    }),
    // attributify autocomplet
    presetWeappAttributify()
  ],
  transformers: [
    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify(),

    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass(),
  ],
})
这样冲突问题就解决了 
<view bg="#333" p="x-6 y-10" w100 h200 class="li-bg-red">
  this is a unocss
</view>

transform

<view class="li-bg-red li-bg-#333 li-p-x-6 li-p-y-10 li-w100 li-200">
  this is a unocss
</view>

tm-ui-demo

css预设

UnoCSS 文档

Windi CSS文档

默认单位 rpx，w-100 => w-100rpx

渐变背景 (v0.1.12)

gradients

<view class="bg-gradient-to-t from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70"></view>

animation (v0.1.9)

参考 windicss-animation @windicss/plugin-animations

相关动画网站 animate.css animista.net

  • unocss.config.js 自定义动画
import presetWeapp from 'unocss-preset-weapp'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp(),
  ],
  theme: {
    // v0.1.9 加入动画预设
    // https://github.com/MellowCo/unocss-preset-weapp#animation-v019
    // 设置自定义动画
    animation: {
      keyframes: {
        'my-animation': '{0% {letter-spacing: -0.5em;transform: translateZ(-700px);opacity: 0;}40% {opacity: 0.6;}100% {transform: translateZ(0);opacity: 1;}}',
      },
      durations: {
        'my-animation': '0.8s',
      },
      counts: {
        'my-animation': 'infinite',
      },
      timingFns: {
        'my-animation': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
      },
    },
  },
})
<view class="animate-pulse"></view>

<view class="animate-back-in-down animate-iteration-infinite"></view>

<view class="animate-[4s_linear_0s_infinite_alternate_bounce]"></view>

.animate--fl-4s_linear_0s_infinite_alternate_bounce-fr- {
  -webkit-animation: 4s linear 0s infinite alternate bounce;
  animation: 4s linear 0s infinite alternate bounce;
}

safe-area (v0.1.6)

classProperties
p-safepadding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)
pt-safepadding-top: env(safe-area-inset-top)
pb-safepadding-bottom: env(safe-area-inset-bottom)
pl-safepadding-left: env(safe-area-inset-left)
pr-safepadding-right: env(safe-area-inset-right)

width and height

classProperties
h-1_2
h-1/2
h-half		height: 50%
w-1_3
w-1/3		width: 33.33333%
h-fullheight: 100%
width-20width: 20r
h-xsheight: 180rpx
预设 
export const baseSize = {
  'xs': '180rpx',
  'sm': '220rpx',
  'md': '260rpx',
  'lg': '300rpx',
  'xl': '340rpx',
  '2xl': '390rpx',
  '3xl': '440rpx',
  '4xl': '490rpx',
  '5xl': '540rpx',
  '6xl': '590rpx',
  '7xl': '640rpx',
  '8xl': '690rpx',
  '9xl': '740rpx',
  'full': '100%',
  'half': '50%',
}

border

classProperties
border-2border-width:2rpx;border-style:solid;
b-2border-width:2rpx;border-style:solid;
border-dashedborder-style:dashed
rounded-1_2
rounded-1/2
rounded-half		border-radius:50%
rounded-mdborder-radius:12rpx
预设 
export const borderRadius = {
  'DEFAULT': '8rpx',
  'none': '0',
  'sm': '4rpx',
  'md': '12rpx',
  'lg': '16rpx',
  'xl': '24rpx',
  '2xl': '32rpx',
  '3xl': '48rpx',
  'half': '50%',
  'full': '9999px',
}

border-color

classProperties
border-red-100
border-red-1		--un-border-opacity:1; border-color:rgba(254,226,226,var(--un-border-opacity))
border-opacity-20
border-op-20		--un-border-opacity:0.2
border-black_10
border-black/10
border-black:10		border-color:rgba(0,0,0,0.1)

color

classProperties
op-10
opacity-10		opacity:0.1
color-hex-157
c-hex-157
c-[#157]		--un-text-opacity:1;color:rgba(17,85,119,var(--un-text-opacity))
c-hex-157_10
c-hex-157/10
c-[#157]/10
c-[#157]:10
c-[#157]_10		color:rgba(17,85,119,0.1)
color-blue,
color-blue-400,
c-blue		--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity))
text-red-100
text-red100
text-red1		--un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity))
text-red-100_20
text-red-100/20
text-red-100:20		color:rgba(254,226,226,0.2)

bg

classProperties
bg-hex-452233_40
bg-[#452233]_40
bg-[#452233]/40
bg-[#452233]:40		background-color:rgba(69,34,51,0.4)
bg-red-100
bg-red1
bg-red100		--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity))
bg-teal-100_55
bg-teal-100/55
bg-teal-100:55		background-color:rgba(204,251,241,0.55)
bg-opacity-45--un-bg-opacity:0.45

typography

classProperties
text-basefont-size:32rpx;line-height:48rpx
text-100
text-size-100		font-size:100rpx
text-2emfont-size:2em
font-900,
font-black
fw-900		font-weight:900
font-leading-2
leading-2		line-height:16rpx
indenttext-indent:48rpx
indent-2text-indent:16rpx
indent-1_2
indent-1/2
indent-1:2		text-indent:50%
indent-lgtext-indent:64rpx
text-shadow-lg--un-text-shadow:6rpx 6rpx 12rpx var(--un-text-shadow-color, rgba(0,0,0,0.26)),0 0 10rpx var(--un-text-shadow-color, rgba(15,3,86,0.22));text-shadow:var(--un-text-shadow)
word-spacing-2word-spacing:16rpx
tracking-2letter-spacing:16rpx
fontSize预设  text-base 
export const fontSize: Theme['fontSize'] = {
  'xs': ['24rpx', '32rpx'],
  'sm': ['28rpx', '40rpx'],
  'base': ['32rpx', '48rpx'],
  'lg': ['36rpx', '56rpx'],
  'xl': ['40rpx', '56rpx'],
  '2xl': ['48rpx', '64rpx'],
  '3xl': ['60rpx', '72rpx'],
  '4xl': ['72rpx', '80rpx'],
  '5xl': ['96rpx', '1'],
  '6xl': ['120rpx', '1'],
  '7xl': ['144rpx', '1'],
  '8xl': ['192rpx', '1'],
  '9xl': ['256rpx', '1'],
}
text-100 => font-size:100rpx
textIndent 预设  indent-lg 
export const textIndent: Theme['textIndent'] = {
  'DEFAULT': '48rpx',
  'xs': '16rpx',
  'sm': '32rpx',
  'md': '48rpx',
  'lg': '64rpx',
  'xl': '80rpx',
  '2xl': '96rpx',
  '3xl': '128rpx',
}
leadings  tracking  word-spacing  indent 计算方式

indent-2 原为 text-indent: 0.5rem 等于 8px ,

小程序使用 750rpx 的基准是 2倍px 等于 16rpx ,

所以计算为 2*0.5*1rem = 2*0.5*16px = 16rpx

indent-2    
text-indent: 0.5rem 
text-indent: 16rpx

tracking-2    
letter-spacing: 0.5rem  
letter-spacing:16rpx

word-spacing-2   
word-spacing: 0.5rem  
word-spacing:16rpx

leadings-2  
line-height: 0.5rem  
line-height:16rpx

spacing

classProperties
p-2,p2padding:16rpx
mx-2margin-left:16rpx;margin-right:16rpx
-m-lgmargin:-36rpx
pl-10pxpadding-left:10px
m-10rpxmargin:10rpx
> 预设
export const spacing = {
  'DEFAULT': '32rpx',
  'none': '0',
  'xs': '24rpx',
  'sm': '28rpx',
  'md': '36rpx',
  'lg': '40rpx',
  'xl': '48rpx',
  '2xl': '60rpx',
  '3xl': '72rpx',
  '4xl': '96rpx',
  '5xl': '120rpx',
  '6xl': '144rpx',
  '7xl': '192rpx',
  '8xl': '256rpx',
}

box-shadow

预设 
export const boxShadow = {
  'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1)'],
  'none': '0 0 rgba(0,0,0,0)',
  'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgba(0,0,0,0.05)',
  'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgba(0,0,0,0.1)'],
  'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgba(0,0,0,0.1)'],
  'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgba(0,0,0,0.1)'],
  '2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgba(0,0,0,0.25)',
  'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.05)',
}
连体写法 
<view class="shadow-[0px_4px_4px_0px_rgba(237,_0,_0,_1)]"></view>

flex gap

classProperties
flex-basis-1_2flex-basis:50%
flex-basis-2flex-basis:16rpx
gap-4grid-gap:32rpx;gap:32rpx
gap-x-2grid-column-gap:16rpx;column-gap:16rpx;

转载请注明出处或者链接地址：https://www.qianduange.cn//article/275.html
标签
uni-apptaro
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

js向上取整

2024-02-03 16:02:53

9、jQuery

2024-02-03 12:02:49

web前端1 x（初级）理论（158道单选题含答案）

2024-02-03 12:02:49

网站登录界面制作（three.js 3D特效背景） boostrap导航栏实现 jQuery移动窗口【附加源代码】

2024-02-03 12:02:45

基于javaweb mysql的ssm maven红酒朔源管理系统(java ssm jsp layui jquery mysql)

2024-02-03 12:02:39

VUE倒计时组件，解决setInterval （）引起页面卡顿问题

2024-02-03 12:02:38

jquery导航图片全屏滚动、首页全屏轮播图，各式相册

2024-02-03 12:02:31

基于Bootstrap&HTML&CSS&jQuery制作左侧多级垂直导航菜单(含源码)

2024-02-03 12:02:29

onlyoffice 相关参数设置说明

2024-02-03 12:02:29

jQuery 遍历方法总结

2024-02-03 12:02:26

大家推荐的文章
1

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
2

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
3

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
4

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
5

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994
6

Access-Control-Allow-Origin跨域解决及详细介绍

2024-02-03 12:02:13993
7

Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993
8

vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题

2024-01-27 01:01:35992
9

jQuery实现AJAX和AJAX跨域问题

2024-01-28 12:01:54988
10

echarts - 自定义形状 - 实现立体柱状图

2024-01-30 10:01:46987

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！