luss

v3.0.7

Published

2 years ago

A less tookit

Downloads

0High
0Medium
0Low

ccwq

重大重构

使用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的相关设置

规则名称 | 规则内容 | 说明 | 举例 ---|:---|:--- | :--- p* | padding | - | <div class="pl10"> pl* | padding-left | - | pt* | padding-top | | pr* | padding-right | | pb* | padding-bottom | | ph* | padding-left, padding-right | 设置水平方向padding |<div class="ph10"> pv* | padding-top, padding-bottom | 设置垂直方向padding | -

m系列,margin相关设置

规则名称 | 规则内容 | 说明 | 举例 ---|:---|:--- | :--- m* | margin | - | <div class="pl10"> ml* | margin-left | - | mt* | margin-top | | mr* | margin-right | | mb* | margin-bottom | | mh* | margin-left, margin-right | 设置水平方向margin |<div class="mh10"> mv* | margin-top, margin-bottom | 设置垂直方向margin | - m-auto | margin:auto | 设置padding为auto ml-auto | margin-left:auto | 设置左padding为auto | - mt-auto | - | - |- mr-auto | - | - |- mb-auto | - | - |-

数值同上

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

规则名称 | 规则内容 | 说明 | 举例 ---|:---|:--- | :--- w* | width | 设置目标width | - h* | height | 设置目标height | - fz* | font-size | - | - lh* | height,line-height | - | - ti* | text-indent | 设置block元素的首行缩进 | -

数值通同上

以为px单位规则

规则 | 加重 | 说明 :---|---|--- h1px | h1px-i | w1px | w1px-i | bl1px | - | bt1px | - | brpx | - | bb1px | - | b1px | - | border-width:1px

0 1 2 3 4 5

百分比单位

规则 | 加重 | 说明 :---|--- | --- w00p|w00p-i|width:0%; w15p|w15p-i|width:15% w33d33|w33d33-i|width:33.33% ...|...|... w100p|w100p-i|width:100%

可用值

vw/vh单位

规则 | 加重 | 说明 :---|--- | --- vw10 | vw10-i | width:10vw vh10 | vh10-i | width:10vh

可用值

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

透明度设置

规则 | 加重 | hover :---|---|--- op00|op00-i|op00-hover op00d5 | - | - op01 | - | - op01d5 || ...|...|... op09d5 | - | - op10 |op10-i|op10-hover

可用值

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

缩放scale

规则 | 加重 | hover :---|---|--- scale00 |scale00-i | scale00-hover scale00d5 | - | - sacle01 | - | - scale01d5 || ...|...|... scale09d5 | - | - scale10 |scale10-i|op10-hover

可用值

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

颜色相关

规则 | 加重 | hover | hover加重 | 说明 :---|---|---|---| --- cl-red|cl-red-i|cl-red-hover | cl-red-hover | color:#f44336 bg-red|cl-red-i|cl-red-hover | cl-red-hover | background-color:#f44336 bd-red|cl-red-i|cl-red-hover | cl-red-hover | border-color:#f44336

颜色可用值请参考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