HTML UnoCss README

Features

• *.html 保存时自动根据 class name 生成 样式并写入当前文件的 head 标签中；
• ctrl+f 或 command+f 在当前搜索你需要使用的css属性；

Extension Settings

    /** 
     * settings.json
     * .vscode/settings.json
     * 注：先从保存文件的位置依次往上读取 `.vscode/settings.json` 文件
     * 没有则读取 `Visual Studio Code` 根目录下的 `settings.json` 文件
     */
    {
        ***,
        "html.unocss": {
            tabSize: 4,
            unit: 'px',
            autoImport: false,
            include: undefined,
            exclude: undefined,
            writeToFile: 'file',
            asteriskWildcard: true,
        }
    }

• tabSize

  default：4
  type：number
  explain：tab size

• unit

  default：px
  type：string
  explain：单位

• include

  default：undefined
  type：string | string[]
  explain：选中文件|文件夹；如：[test, pages/home]；注：include、exclude 同时存在优先级 include 高于 exclude

• exclude

  default：undefined
  type：string | string[]
  explain：排除文件|文件夹；如：[test, pages/home]

• autoImport

  default：false
  type：boolean
  explain：是否需要自动引入自动生成的原子化CSS文件；注：autoImport 需要配合 writeToFile !== file 使用

• asteriskWildcard

  default：true
  type：boolean
  explain：是否需要生成 * 通配符样式

• writeToFile

  default：file
  type：file | folder | 绝对路径 | 相对项目的路径 | [[文件名|文件路径, 绝对路径|相对项目的路径]
  explain：file 表示在当前文件的 style 标签中生成原子化CSS
  explain：folder 表示在当前文件夹的生成 [name = 当前保存时html文件名].css 文件中生成原子化CSS
  explain：绝对路径 /**/**
  explain：相对项目的路径 项目名/**
  explain：[[文件名|文件路径, file | folder | 绝对路径 | 相对项目的路径] 文件名|文件路径 如：test | test/**
  explain：如：相对项目的路径 [project/style/common] 没有此文件夹则自动创建；文件后缀默认.css；仅支持 .css、.scss、.less
  explain：如：一个项目用同一个原子化CSS文件 project/style/common | [project, project/style/common]

Following extension guidelines

• 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-1 -relative-1
  className：absolute-1 -absolute-1
  className：fixed-1 -fixed-1
  className：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：overflowx-visible overflowx-hidden overflowx-clip overflowx-scroll overflowx-auto overflowx-inherit overflowx-initial overflowx-revert overflowx-revert-layer overflowx-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：ofx-visible ofx-hidden ofx-clip ofx-scroll ofx-auto ofx-inherit ofx-initial ofx-revert ofx-revert-layer ofx-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-color transition-background-color-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
  className：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

Enjoy!