更新记录

1.0.21(2024-05-12)

  1. 预设 scale 调整只支持 scale-[n] -scale-[n] scale-x-[n] -scale-x-[n] scale-y-[n] -scale-y-[n] 写法(具体写法在当前 ctrl+fcommand+f 在当前搜索 CSS scale 属性查看);

  2. 背景调整还是已 bg 开头;预设新增 bg-transparent 预设;

1.0.20(2024-05-12)

负数写法原来 m--1 调整为 -m-1;更便于理解、阅读;

  1. 新增 include 配置;需要匹配生成的文件;

  2. 新增 exclude 配置;不需要匹配生成的文件;默认 ['uni_modules', 'node_modules', 'App.vue']

  3. 新增 CSS 属性 vertical-align 预设;

  4. 对高度扩展 h-[n]vh max-h-[n]vh min-h-[n]vh

  5. 背景预设修改 bg-* => bgc-*

  6. 间距预设调整 gap-[n] => gap: n + rpx gap-[n]-[n] => gap: n + rpx n + rpx list-gap-[width]-[column] 针对列表布局剩下宽度间距吸收

  7. vertical-* 速写 v-*

  8. column-count-* 速写 column-*

  9. round-* 速写 rd-*

  10. line-height-* 速写 lh-*

  11. overflow-* 速写 of-*

  12. transform-origin-* 速写调整为完成单词写法,便于阅读;如:transform-origin-center transform-origin-center-center

1.0.17(2024-05-07)

  1. 新增 vertical-align 属性预设;

  2. 新加 transition-opacity 过渡;

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue app-uvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

简单版轻量原子化CSS

Usage

/** vite.config.js */
import { defineConfig } from 'vite';
import unocss from './js_sdk/a-hua-unocss';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
    plugins: [
        uni(),
        unocss()
    ]
});

/** App.vue */
<style lang="scss">
    /*每个页面公共css */
    @import "@/js_sdk/a-hua-unocss/index.scss";
</style>

/** *.vue、*.nvue、*.uvue */
<view class="p-20 -m-1 mx-16 bg-red bg-red-20 text-white text-bold text-32 opacity-70">
    简单版轻量原子化CSS
</view>
/** 
 * -m-1 => margin: -1px;
 * p-20 => padding: 20rpx;
 * opacity-70 => opacity: .7;
 * text-white => color: white;
 * text-32 => font-size: 32rpx;
 * text-bold => font-weight: bold;
 * bg-red => background-color: red;
 * bg-red-20 => background-color: rgba(red, .2);
 * mx-16 => margin-left: 16rpx;margin-right: 16rpx;
 */

自定义预设【原子化CSS】规则

/** vite.config.js */
import { defineConfig } from 'vite';
import unocss from './js_sdk/a-hua-unocss';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
    plugins: [
        uni(),
        unocss({
            rules: [
                ['m-1', { margin: '1px' }],
                [/^m-([\.\d]+)$/, (_, m, d) => ({ margin: `${d}px` })]
            ]
        })
    ]
});

Options

name type default
unit string rpx
once boolean true
rules Rules undefined
autoImport boolean true
asteriskWildcard boolean true
include string | string[] undefined
cssFilePath string @/js_sdk/a-hua-unocss/index.scss
exclude string | string[] ['uni_modules', 'node_modules', 'App.vue']
  • unit:单位;
  • exclude:排除文件|文件夹;如:[uni_modules, pages/home]
  • asteriskWildcard:是否生成 * 通配符样式;注:只对 H5 生效;
  • cssFilePath:预设css文件路径;注:此属性只对 mp-weixin 生效。需要配合 autoImport 使用;
  • once:true 只第一次运行项目生成原子类样式;false 每次运行项目清空上次生成原子类样式,然后重新生成原子类样式;
  • include:匹配文件|文件夹;如:[test, pages/home];注:include、exclude 同时存在优先级 include 高于 exclude
  • autoImport:是否在使用了此规则的 .vue 文件,自动引入预设 .scss 文件;注:此属性只对 mp-weixin 生效。因为 uniapp 编译 mp-weixin 问题,开发环境默认自动添加,生产环境自动删除。故而开发微信小程序时不要关闭该属性。后续迭代版本会解决此问题;
  • rules:自定义预设CSS规则;
type CSSEntries = [string, string | number][];
type CSSObject = Record<string, string | number>;
type CSSValue = CSSObject | CSSEntries;
type Rules = [string, CSSObject | CSSEntries] | [RegExp, ((match: RegExpMatchArray, ...context: string[]) => CSSValue | string | (CSSValue | string)[] | undefined)]

Use Rule

width、height

  • className:w-1 w-auto w-fit w-full w-full-10
  • className:h-1 h-auto h-fit h-full h-full-10 h-1vh
  • explain:w-auto => width: auto
  • explain:w-full => width: 100%
  • explain:w-[n] => width: [n] + rpx
  • explain:h-[n]vh => height: [n] + vh
  • explain:w-full-[n] => width: [n] + %
  • explain:w-fit => width: fit-content
  • n:正整数

margin、padding

  • className:m-1 -m-1 m-full -m-full m-full-10 -m-full-10 m-auto
  • className:mx-1 -mx-1 mx-full -mx-full mx-full-10 -mx-full-10 mx-auto
  • className:my-1 -my-1 my-full -my-full my-full-10 -my-full-10 my-auto
  • className:mt-1 -mt-1 mt-full -mt-full mt-full-10 -mt-full-10 mt-auto
  • className:mr-1 -mr-1 mr-full -mr-full mr-full-10 -mr-full-10 mr-auto
  • className:mb-1 -mb-1 mb-full -mb-full mb-full-10 -mb-full-10 mb-auto
  • className:ml-1 -ml-1 ml-full -ml-full ml-full-10 -ml-full-10 ml-auto
  • className:p-1 p-full p-full-10
  • className:px-1 px-full px-full-10
  • className:py-1 py-full py-full-10
  • className:pt-1 pt-full pt-full-10
  • className:pr-1 pr-full pr-full-10
  • className:pb-1 pb-full pb-full-10
  • className:pl-1 pl-full pl-full-10
  • explain:m-auto => margin: auto
  • explain:m-full => margin: 100%
  • explain:-m-full => margin: -100%
  • explain:m-[n] => margin: n + rpx
  • explain:m-full-[n] => margin: n + %
  • explain:mt-[n] => margin-top: n + rpx
  • explain:-m-[n] => margin: -1 * n + rpx
  • explain:-m-full-[n] => margin: -1 * n + %
  • explain:mx-[n] => margin-left: n + rpx;margin-right: n + rpx
  • n:正整数

background-color

  • className:bg-000 bg-000000 bg-red bg-red-10 bg-transparent
  • explain:bg-[x] => background-color: x
  • explain:bg-[x]-[n] => background-color: rgba(x, n)
  • explain:bg-transparent => background-color: transparent
  • n:透明度 n % 10 === 0
  • x:hex (6位)、hex 速写(3位)、颜色预设值

border

  • className:b b-1 b-red b-red-10 b-color-red b-color-red-10 b-solid b-style-solid
  • className:bt bt-1 bt-red bt-red-10 bt-color-red bt-color-red-10 bt-solid bt-style-solid
  • className:br br-1 br-red br-red-10 br-color-red br-color-red-10 br-solid br-style-solid
  • className:bb bb-1 bb-red bb-red-10 bb-color-red bb-color-red-10 bb-solid bb-style-solid
  • className:bl bl-1 bl-red bl-red-10 bl-color-red bl-color-red-10 bl-solid bl-style-solid
  • explain:b-[c] => border-color: c
  • explain:b-[s] => border-style: s
  • explain:b => border-width: 1rpx
  • explain:b-style-[s] => border-style: s
  • explain:bt => border-top-width: 1rpx
  • explain:b-[n] => border-width: n + rpx
  • explain:b-color-[c] => border-color: c
  • explain:b-[c]-[o] => border-color: rgba(c, o)
  • explain:b-color-[c]-[o] => border-color: rgba(c, o)
  • n:正整数 n <= 99
  • o:透明度 o % 10 === 0
  • s:border-style 属性值
  • c:hex (6位)、hex 速写(3位)、颜色预设值

color

  • className:text-000 text-000000 text-red text-red-10
  • explain:text-[x] => color: x
  • explain:text-[x]-[n] => color: rgba(x, n)
  • n:透明度 n % 10 === 0
  • x:hex (6位)、hex 速写(3位)、颜色预设值

font-size

  • className:text-24
  • explain:text-[n] => font-size: n + rpx
  • n:正整数 n <= 99

text-align

  • className:text-center text-right text-left
  • explain:text-center => text-align: center

text-overflow

  • className:text-ellipsis
  • explain:text-ellipsis => text-overflow: ellipsis

font-weight

  • className:text-bold text-normal
  • explain:text-bold => font-weight: bold
  • explain:text-normal => font-weight: normal

white-space

  • className:nowrap pre-line
  • explain:nowrap => white-space: nowrap
  • explain:pre-line => white-space: pre-line

word-break

  • className:break-word break-all
  • explain:break-all => word-break: break-all
  • explain:break-word => word-break: break-word

display

  • className:block inline inline-block flex inline-flex grid flex-grid flow-root none contents table table-row list-item inherit initial revert revert-layer unset
  • explain:block => display: block
  • explain:inline-block => display: inline-block

flex

  • className:flex-1 flex-auto flex-none flex-inherit flex-initial flex-revert flex-revert-layer flex-unset flex-row flex-row-reverse flex-column flex-column-reverse flex-col flex-col-reverse flex-wrap flex-wrap-reverse flex-nowrap
  • explain:flex-[n] => flex: n
  • explain:flex-wrap => flex-wrap: wrap
  • explain:flex-col => flex-direction: column
  • explain:flex-column => flex-direction: column
  • n:正整数 n <= 99

justify-content

  • className:justify-inherit justify-initial justify-unset justify-left justify-right justify-between justify-around justify-evenly justify-start justify-end justify-baseline justify-center justify-flex-start justify-flex-end justify-stretch
  • explain:justify-start => justify-content: start
  • explain:justify-between => justify-content: space-between
  • explain:justify-flex-start => justify-content: flex-start

align-items

  • className:items-normal items-stretch items-center items-start items-end items-flex-start items-flex-end items-self-start items-self-end items-inherit items-initial items-revert items-revert-layer items-unset
  • explain:items-center => align-items: center
  • explain:items-flex-start => align-items: flex-start

align-content

  • className:content-center content-start content-end content-flex-start content-flex-end content-normal content-baseline content-between content-around content-evenly content-stretch content-inherit content-initial content-unset
  • explain:content-center => align-content: center
  • explain:content-between => align-content: space-between

position

  • className:static
  • className:relative relative-1 -relative-1
  • className:absolute absolute-1 -absolute-1
  • className:fixed fixed-1 -fixed-1
  • className:sticky sticky-1 -sticky-1
  • explain:static => position: static
  • explain:relative-[n] => position: relative;z-index: n
  • explain:-relative-[n] => position: relative;z-index: -1 * n
  • n:正整数 n <= 9999999

z-index

  • className:z-1 -z-1
  • explain:z-[n] => z-index: n
  • explain:-z-[n] => z-index: -1 * n
  • n:正整数 n <= 9999999

top、right、bottom、left

  • className:top-1 -top-1 top-full -top-full top-full-10 -top-full-10
  • className:right-1 -right-1 right-full -right-full right-full-10 -right-full-10
  • className:bottom-1 -bottom-1 bottom-full -bottom-full bottom-full-10 -bottom-full-10
  • className:left-1 -left-1 left-full -left-full left-full-10 -left-full-10
  • explain:top-full => top: 100%
  • explain:-top-full => top: -100%
  • explain:top-[n] => top: n + rpx
  • explain:top-full-[n] => top: n + %
  • explain:-top-[n] => top: -1 * n + rpx
  • explain:-top-full-[n] => top: -1 * n + %
  • n:正整数 n <= 999

translate、scale、rotate、scale

  • className:translate-1 -translate-1 translate-full -translate-full translate-full-10 -translate-full-10
  • className:translate-x-1 -translate-x-1 translate-x-full -translate-x-full translate-x-full-10 -translate-x-full-10
  • className:translate-y-1 -translate-y-1 translate-y-full -translate-y-full translate-y-full-10 -translate-y-full-10
  • className:translate-z-1 -translate-z-1 translate-z-full -translate-z-full translate-z-full-10 -translate-z-full-10
  • className:scale-10 -scale-10
  • className:scale-x-10 -scale-x-10
  • className:scale-y-10 -scale-y-10
  • className:rotate-1 -rotate-1
  • className:rotate-x-1 -rotate-x-1
  • className:rotate-y-1 -rotate-y-1
  • className:rotate-z-1 -rotate-z-1
  • className:skew-1 -skew-1
  • className:skew-x-1 -skew-x-1
  • className:skew-y-1 -skew-y-1
  • explain:scale-[n] => scale: n / 100
  • explain:rotate-[n] => rotate: n + deg
  • explain:translate-[n] => translate: n + rpx n + rpx
  • explain:skew-[n] => transform: skew(n + deg n + deg)
  • explain:translate-full-[n] => translate(n + % n + %)
  • explain:-translate-[n] => translate: -1 * n + rpx -1 * n + rpx
  • explain:-translate-full-[n] => translate: -1 * n + % -1 * n + %
  • explain:translate-x-[n] => transform: translateX(n + rpx n + rpx)
  • n:正整数 n <= 999

transform-origin

  • className:transform-origin-center transform-origin-center-top transform-origin-center-right transform-origin-center-center transform-origin-center-bottom transform-origin-center-left
  • className:transform-origin-top transform-origin-top-right transform-origin-top-center transform-origin-top-left
  • className:transform-origin-right transform-origin-right-top transform-origin-right-center transform-origin-right-bottom
  • className:transform-origin-bottom transform-origin-bottom-left transform-origin-bottom-center transform-origin-bottom-right
  • className:transform-origin-left transform-origin-left-top transform-origin-left-center transform-origin-left-bottom
  • className:transform-origin-1 transform-origin-1-1
  • explain:transform-origin-[n] => transform-origin: n + rpx
  • explain:transform-origin-center => transform-origin: center
  • explain:transform-origin-center-top => transform-origin: center top
  • explain:transform-origin-[n]-[n] => transform-origin: n+ rpx n + rpx
  • n:正整数 n <= 999

transform-style

  • className:transform-style-3d transform-style-flat
  • explain:transform-style-flat => transform-style: flat
  • explain:transform-style-3d => transform-style: preserve-3d

overflow

  • className:overflow-visible overflow-hidden overflow-clip overflow-scroll overflow-auto overflow-inherit overflow-initial overflow-revert overflow-revert-layer overflow-unset
  • className:overflow-x-visible overflow-x-hidden overflow-x-clip overflow-x-scroll overflow-x-auto overflow-x-inherit overflow-x-initial overflow-x-revert overflow-x-revert-layer overflow-x-unset
  • className:overflow-y-visible overflow-y-hidden overflow-y-clip overflow-y-scroll overflow-y-auto overflow-y-inherit overflow-y-initial overflow-y-revert overflow-y-revert-layer overflow-y-unset
  • className:of-visible of-hidden of-clip of-scroll of-auto of-inherit of-initial of-revert of-revert-layer of-unset
  • className:of-x-visible of-x-hidden of-x-clip of-x-scroll of-x-auto of-x-inherit of-x-initial of-x-revert of-x-revert-layer of-x-unset
  • className:of-y-visible of-y-hidden of-y-clip of-y-scroll of-y-auto of-y-inherit of-y-initial of-y-revert of-y-revert-layer of-y-unset
  • explain:of-hidden => overflow: hidden
  • explain:overflow-hidden => overflow: hidden
  • explain:overflow-x-hidden => overflow-x: hidden

gap

  • className:list-gap-200-3 gap-1 gap-1-1
  • explain:gap-[n] => gap: n + rpx
  • explain:gap-[n]-[n] => gap: n + rpx n + rpx
  • explain:list-gap-[width]-[column] => gap: calc((100% - (width + rpx) * n) / (n - 1))
  • n:正整数 n <= 999
  • column:正整数,列 n < 10
  • width:正整数,column 宽度 n <= 999

min-width、min-height、max-width、max-height

  • className:min-w-10 min-w-full min-w-full-10
  • className:min-h-10 min-h-10vh min-h-full min-h-full-10
  • explain:min-w-full => min-width: 100%
  • explain:min-w-[n1] => min-width: n1 + rpx
  • explain:min-w-[n1]vh => min-width: n1 + vh
  • explain:min-w-full-[n2] => min-width: n2 + %
  • n1:正整数 n1 <= 999
  • n2:正整数 n1 <= 100

object-fit

  • className:fit-none fit-contain fit-cover fit-fill fit-scale-down
  • explain:fit-cover => object-fit: cover
  • explain:fit-cale-down => object-fit: cale-down

opacity

  • className:opacity-10
  • explain:opacity-[n] => opacity: n / 100
  • n:正整数 n <= 100

transition

  • className:transition-color transition-color-300
  • className:transition-width transition-width-300
  • className:transition-height transition-height-300
  • className:transition-border transition-border-300
  • className:transition-margin transition-margin-300
  • className:transition-padding transition-padding-300
  • className:transition-opacity transition-opacity-300
  • className:transition-transform transition-transform-300
  • className:transition-font-size transition-font-size-300
  • className:transition-background transition-background-300
  • className:transition-background-color transition-background-color-300
  • explain:transition-color => transition: color .3s cubic-bezier(.4,0,.2,1)
  • explain:transition-font-size => transition: font-size .3s cubic-bezier(.4,0,.2,1)
  • explain:transition-color-[n] => transition: color n / 1000 + s cubic-bezier(.4,0,.2,1)
  • n:正整数 n % 100 === 0;n <= 9000

line-clamp

  • className:line-clamp-1
  • explain:line-clamp-[n] => overflow:hidden;line-clamp: n ;display:-webkit-box;-webkit-line-clamp: n ;-webkit-box-orient:vertical
  • n:正整数 n < 10

line-height

  • className:line-height-10 lh-10 line-height-normal-10 lh-normal-10
  • explain:lh-[n1] => line-height: n + rpx
  • explain:line-height-[n1] => line-height: n + rpx
  • explain:line-height-normal-[n2] => line-height: n2 / 10
  • n1:正整数 n < 999
  • n2:正整数 n < 99

border-radius

  • className:round-1 rd-1
  • className:round-t-1 rd-t-1 round-tr-1 rd-tr-1 round-tl-1 rd-tl-1
  • className:round-r-1 rd-r-1
  • className:round-b-1 rd-b-1 round-br-1 rd-br-1 round-bl-1 rd-bl-1
  • className:round-l-1 rd-l-1
  • explain:rd-[n] => border-radius: n + rpx
  • explain:round-[n] => border-radius: n + rpx
  • explain:round-tr-[n] => border-top-right-radius: n + rpx
  • explain:round-t-[n] => border-top-right-radius: n + rpx ;border-top-left-radius: n + rpx
  • n:正整数 n < 999

column-count

  • className:column-count-2 column-3
  • explain:column-[n] => column-count: n
  • explain:column-count-[n] => column-count: n
  • n:正整数 n < 999

column-gap

  • className:column-gap-10
  • explain:column-gap-[n] => column-gap: n + rpx
  • n:正整数 n < 999

box-sizing

  • className:box-border box-content
  • explain:box-border => box-sizing: box-border

break-inside

  • className:avoid-column
  • explain:avoid-column => break-inside: avoid-column

vertical-align

  • className:vertical-baseline vertical-top vertical-middle vertical-bottom vertical-sub vertical-text-top
  • className:vertical-1 -vertical-1 vertical-full -vertical-full vertical-full-10 -vertical-full-10
  • className:v-baseline v-top v-middle v-bottom v-sub v-text-top
  • className:v-1 -v-1 v-full -v-full v-full-10 -v-full-10
  • explain:v-[n] => vertical-align: n + rpx
  • explain:vertical-full => vertical-align: 100%
  • explain:vertical-[n] => vertical-align: n + rpx
  • explain:-vertical-full => vertical-align: -100%
  • explain:vertical-full-[n] => vertical-align: n + %
  • explain:-vertical-[n] => vertical-align: -1 * n + rpx
  • explain:vertical-baseline => vertical-align: baseline
  • explain:vertical-text-top => vertical-align: text-top
  • explain:-vertical-full-[n] => vertical-align: -1 * n + %
  • n:正整数 n < 999

Contact

  • 欢迎大家提供建议。
  • wx:_____ahua
  • phone:15850531310
  • email:cvsq@icloud.com

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问