ease部分的内容来自qivhou的仓库 https://github.com/qivhou/easing.less
以及raphaelameaume的 https://github.com/raphaelameaume/gsap-easings-css
#文档
工具类大致分为m,p,size,color系列以及其他零散的小工具class
###p系列用来设置目标元素盒模型的padding
.p10工具类对应的规则为
.p10{padding:1em}
/*支持import*/
.p10-i{padding:1em !important}
| 规则名称 | 规则内容 | 说明 | 举例 |
|---|---|---|---|
| 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 | - | <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 | - | - | - |
数值同上
| 规则名称 | 规则内容 | 说明 | 举例 |
|---|---|---|---|
| w* | width | 设置目标width | - |
| h* | height | 设置目标height | - |
| fz* | font-size | - | - |
| lh* | height,line-height | - | - |
| ti* | text-indent | 设置block元素的首行缩进 | - |
数值通同上
| 规则 | 加重 | 说明 |
|---|---|---|
| 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% |
可用值
| 规则 | 加重 | 说明 |
|---|---|---|
| vw10 | vw10-i | width:10vw |
| vh10 | vh10-i | width:10vh |
可用值
| 规则 | 加重 | hover |
|---|---|---|
| op00 | op00-i | op00-hover |
| op00d5 | - | - |
| op01 | - | - |
| op01d5 | ||
| ... | ... | ... |
| op09d5 | - | - |
| op10 | op10-i | op10-hover |
可用值
| 规则 | 加重 | hover |
|---|---|---|
| scale00 | scale00-i | scale00-hover |
| scale00d5 | - | - |
| sacle01 | - | - |
| scale01d5 | ||
| ... | ... | ... |
| scale09d5 | - | - |
| scale10 | scale10-i | op10-hover |
可用值
| 规则 | 加重 | 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.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
FAQs
A less tookit
The npm package luss receives a total of 4 weekly downloads. As such, luss popularity was classified as not popular.
We found that luss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The White House’s Gold Eagle Initiative aims to coordinate AI-discovered vulnerabilities, validate findings, and accelerate patching across critical software.
Security News
A Shai-Hulud infection exposed Suno's source code, which shows the AI music startup stream-ripped tracks to train its models.
Security News
Vercel is formalizing a monthly release program for Next.js. The change follows React2Shell and a sharp rise in AI-assisted vulnerability discovery.