luss v3.0.7

重大重构

使用unocss重新实现大部分规则,以减少dist。

unocss: https://github.com/unocss/unocss

增加unocss的规则,以及对官方extractorPug问题的修复,解决在某些情况下无法读取pug class规则的问题。

vite项目中使用

import Unocss from 'unocss/vite'
import {extractorSplit, presetUno} from 'unocss'
import {rules, extractorPugFactory} from "luss/dist/unocss-luss"
/*
该语句可能在ts中被标红
需要再tsconfig.node.json增加如下配置
compilerOptions.lib: ["es2015"]
*/
const extractorPug = extractorPugFactory(import("pug"))

export default {
    plugins: [
        Unocss(
        {
            //@ts-ignore
            rules: [
                //@ts-ignore
                ...rules
            ],
            extractors: [
                extractorPug(),
                extractorSplit
            ],
            "presets": [
                
                // 否则颜色相关的设定会报错
                presetUno(),
            ]
        }
        )
    ]
}

引用:

ease部分的内容来自qivhou的仓库 https://github.com/qivhou/easing.less

以及raphaelameaume的 https://github.com/raphaelameaume/gsap-easings-css

#文档

unocss相关内容

.m10 //margin:10em
mt01 //margin-top:0.1em
mt01x //margin-top:0.1px
.t15xi //top:15px !important
.-l10-2vh //left: -10.2vh
.cl-red100 //color: #ff0000
.bg-red;
.bc-red;

.ho_cl-red; //.ho_cl-red:hover{color:@red}
.son_cl-red; //.son_cl-red>*{color:@red}
.son-ho_cl-red; //.son_cl-red>*:hover{color:@red}

.maxh150x
.minw180x

工具类大致分为m,p,size,color系列以及其他零散的小工具class

###p系列用来设置目标元素盒模型的padding

.p10工具类对应的规则为

.p10{padding:1em}

/*支持import*/
.p10-i{padding:1em !important}

p系列,padding的相关设置

m系列,margin相关设置

数值同上

size系列字体大小、行高缩进、宽度、高度

数值通同上

以为px单位规则

0 1 2 3 4 5

百分比单位

可用值

• 100
• 95
• 90
• 85
• 80
• 75
• 70
• 65
• 60
• 55
• 50
• 45
• 40
• 35
• 30
• 25
• 20
• 15
• 10
• 5
• 0

vw/vh单位

可用值

• 100
• 90
• 80
• 75
• 66d66
• 50
• 36
• 35
• 33d33
• 30
• 25
• 20
• 12d5
• 10
• 0

透明度设置

可用值

• 00
• 00d5
• 01
• 01d5
• 02
• 02d5
• 03
• 03d5
• 04
• 04d5
• 05
• 05d5
• 06
• 06d5
• 07
• 07d5
• 08
• 08d5
• 09
• 09d5
• 10

缩放scale

可用值

• 00
• 03
• 06
• 09
• 12
• 15
• 18
• 21
• 24
• 27
• 30
• 33
• 36
• 00
• 02
• 04
• 06
• 08
• 10
• 12
• 14
• 16
• 18
• 20
• 05
• 05d5
• 06
• 06d5
• 07
• 07d5
• 08
• 08d5
• 09
• 09d5
• 10
• 10d5
• 11
• 11d5
• 12
• 12d5
• 13
• 13d5
• 14
• 14d5
• 15

颜色相关

颜色可用值请参考meterial design colors https://www.materialui.co/colors 首字母用小写

flex相关

• .flex
• .flex.inline flex-inline
• .flex.inline.fix 修复0.14em误差
• .flex.column flex-direction：column;
• .jc-start
• .jc-center
• .jc-end
• .jc-between
• .between 同上
• .jc-around
• .around 同上

• .ai-start
• .ai-center
• .ai-end

• .ai-stretch

• .ac-start

• .ac-center
• .ac-end
• .ac-between
• .ac-around
• .ac-stretch

• .wrap
• .wrap-rev
• .wrap-no
• .wrap-in
• .wrap-un

• .as-start
• .as-center
• .as-end

• .as-stretch

• .fx1

• .fx2
• .fx3
• .fx4
• .fx5

字体相关

• .ff-yh
• .ff-st
• .ff-xst
• .ff-ht
• .ff-zh

无法分类

• .txcut 字符串截取
• .noselect 不可选
• .fillin
• .clear
• .center 内容居中
• .fs-reset 重置内部元素字体大小为1rem，自身为0
• .cp
• .tr,text-align,right;
• .tc,text-align,center;
• .tl,text-align,left;
• .pa,position,absolute;
• .pr,position,relative;
• .ps,position,static;
• .db, display,block;
• .di, display, inline;
• .dib,display,inline-block;
• .cp,cursor,pointer;
• .cd,cursor,default;
• .bbox, box-sizing, border-box;
• .cbox, box-sizing, content-box;
• .wnw, white-space, nowrap;
• .wnn, white-space, normal;
• .hide, display, none;
• .bg-coveride, background-size, cover;
• .background-size, background-size, contain;
• .fit-cover, object-fit, cover;
• .fit-contain, object-fit, contain;
• .ts-late-x--50p, transform, translateX(-50%);
• .ts-late-y--50p, transform, translateY(-50%);
• .b-solid
• .b-dotted
• .b-dashed
• .b-double