Skip to content

m-less 参数介绍

个人整理常用的css属性简写及常用的 mixins

已经废弃,不建议使用。可以尝试 UnoCSS

html
<div class="btn">btn</div>
less
.btn {
  .m(20px);
  .btn(100px, 40px, 10px, @c-blue);
  .box>.shadow;
  .font(20px, @c-white);
}

简介

  • 自用的less文件 github
  • 包含常用属性简写、常用的 mixins、颜色及字体定义、清除浏览器默认样式
  • 默认只对少数几个属性进行了浏览器前缀处理,建议使用 Autoprefixer 处理浏览器前缀兼容
  • 或者手动引入 -old 文件
  • 使用最好有些 less 基础
  • 如果属性的所有的参数都有默认值,可以省略(),否则需要传人所需参数
  • 如果一个默认值为空,说明当没有当前参数时,只触发前面的属性,当前及后面的属性

提示

手动引入 -old 仅对内置属性处理

  1. 将 mixins.less 里面的 alias 改为 alias-old
  2. 将 mixins.less 里面的 flex 改为 flex-old

目录结构

+- less
  +- mixins mixins 相关文件
    ...
  +- styles
    +- base.less 属性简写(默认)
    +- main.less 样式文件
  +- mixins.less 输出 mixins 文件
  +- styles.less 输出文件
  +- variable.less 变量文件

默认字体列表

@f-base: -apple-system,BlinkMacSystemFont,Microsoft YaHei,Segoe UI,Roboto,Source Han Sans SC,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neu,sans-serif

默认颜色

必须颜色,只能够修改,不可删除

  • @c-text: @c-gray; // 字体默认颜色
  • @c-line: @c-silver; // 线条默认颜色
  • @c-btn: @c-blue; // 按键背景
  • @c-shadow: fade(@c-black, 30%); // 阴影默认颜色
  • @c-t: transparent; // 透明

属性简写

less
/* 例如 */
width: 100px;
/* 简写 */
.w(100px);

简写对照表

  • 整理了部分常用的css样式属性
属性简写参数默认值说明
width.wwidth
height.hheight
min-width.minwmin-width
min-height.minhmin-height
max-width.maxwmax-width
max-height.maxhmax-height
box-shadow.bsx, y, blur, color,... 0, 1px, 6px, @c-shadow最后加 inset 可变成内阴影
box-shadow inset.bs>.insetx, y, blur, color0, 1px, 6px, @c-shadow
border.bdwidth, color, style1px, @c-line, solid
border-top.bdtwidth, color, style1px, @c-line, solid
border-bottom.bdbwidth, color, style1px, @c-line, solid
border-left.bdlwidth, color, style1px, @c-line, solid
border-right.bdrwidth, color, style1px, @c-line, solid
border-image.bdi...
border-radius.br...
box-sizing.bsizbox-sizing
outline-offset.oooutline-offset
box-reflect.brefbox-reflect
resize.resresize
font.f...
font-size.fsfont-size
color.ccolor
font-family.fffont-family
text-indent.titext-indent
text-align.tatext-align
line-height.lhline-height
font-weight.fwfont-weight
text-shadow.tsx, y, blur, color0, 1px, 4px, @c-shadow
text-stroke.tstrwidth, color
text-decoration.tdtext-decoration
text-overflow.totext-overflow
white-space.wswhite-space
font-style.fstyfont-style
column-count.cccolumn-count
column-gap.cgcolumn-gap
column-rule.crcolumn-rule
margin.m...
margin-top.mtmargin-top
margin-bottom.mbmargin-bottom
margin-left.mlmargin-left
margin-right.mrmargin-right
padding.p...
padding-top.ptpadding-top
padding-bottom.pbpadding-bottom
padding-left.plpadding-left
padding-right.prpadding-right
display.ddisplay
vertical-align.vavertical-align
visibility.vvisibility
overflow.of...
flex-direction.fxdflex-direction
flex-wrap.fxwflex-wrap
flex-flow.fxfflex-flow
justify-content.jsjustify-content
align-items.aialign-items
align-content.acalign-content
order.ordorder
flex-grow.fxgflex-grow
flex-shrink.fxsflex-shrink
flex-basis.fxbflex-basis
flex.fx...
align-self.asalign-self
position.posposition
top.ttop
bottom.bbottom
left.lleft
right.rright
z-index.ziz-index
background.bg...
background-color.bgcbackground-color
background-image.bgibackground-image
background-position.bgp...
background-size.bgs...
background-repeat.bgr...
background-attachment.bgabackground-attachment
background-origin.bgobackground-origin
background-clip.bgclbackground-clip
transform.tf...
transform-origin.tfo...
filter.fil...
animation.an...
animation-name.annanimation-name
animation-duration.anduranimation-duration
animation-delay.andelanimation-delay
animation-direction.andiranimation-direction
animation-iteration-count.ancanimation-iteration-count
animation-timing-function.amtfanimation-timing-function
transition.ts...
transition-property.tsptransition-propertytransform默认只播放transform动画,需要播放所有动画改为all
transition-duration.dsturtransition-duration
transition-delay.tsdeltransition-delay
transition-timing-function.tstftransition-timing-function
opacity.opopacity
cursor.curcursor
content.concontent
user-select.ususer-selectnone

处理前缀

注意

通过下面方法可以增加特定属性的前缀 需要传入完整属性名,不可简写

简写参数默认值说明
.preproperty, value-webkit-, -moz-, -ms-, -o-, property
.prewproperty, value-webkit-, property
.prewmproperty, value-webkit-, -ms-, property

常用简写

简写说明
.cur-pcursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
.pos-rposition: relative
.d-ndisplay: none
.d-bdisplay: block
.d-fxdisplay: flex
.d-ibdisplay: inline-block
.d-ibtdisplay: inline-block; vertical-align: top
.d-ibmdisplay: inline-block; vertical-align: middle
.v-hvisibility: hidden
.v-vvisibility: visible
.of-hoverflow: hidden
.of-voverflow: visible
.of-soverflow: scroll; ---overflow-scrolling: touch
.of-hsoverflow: hidden scroll; ---overflow-scrolling: touch
.res-bresize: both; overflow: auto
.res-wresize: horizontal; overflow: auto
.res-hresize: vertical; overflow: auto

Mixins 混合

可以通过下面方法简写

less
.box(5rem, 2rem);
.box>.radius(0.5rem);
.box>.shadow;
// 简写
.box(5rem, 2rem);
.radius(0.5rem);
.shadow;

box

简写参数默认值说明
.boxwidth, heightauto, auto
.box>.minmin-width, min-height, width, heightauto, auto, , auto
.box>.maxmax-width, max-height, width, heightauto, auto, , auto
.box>.shadowx, y, blur, color, width, height0, 1px, 6px, @c-shadow, , auto
.box>.borderweight, color, style, width, height1px, @c-line, solid, , auto
.box>.border>.topweight, color, style, width, height1px, @c-line, solid, , auto
.box>.border>.bottomweight, color, style, width, height1px, @c-line, solid, , auto
.box>.border>.leftweight, color, style, width, height1px, @c-line, solid, , auto
.box>.border>.rightweight, color, style, width, height1px, @c-line, solid, , auto
.box>.radiusradius, width, height, , width

font

简写参数默认值说明
.fontsize, color1rem, @c-text
.font>.indentindent, size, color, , @c-text
.font>.heightline-height, size, color, , @c-text
.font>.weightweight, size, colornormal, , @c-text
.font>.shadowx, y, blur, color, size, color0, 1px, 4px, @c-shadow, , @c-text
.font>.strokestroke-weight, stroke-color, weight, size, color, , , , @c-text
.font>.stylestyle, size, coloritalic, , @c-text
.fontsize, color, family

注意

如果 .font 后面带了三个参数,后面接着的 font 里面的内容不能改简写

less
.test {
   .font(.8rem, #333);
   .height(2rem);
   // ok
   .font(.8rem, #333, Arial);
   .height(2rem);
   // error
 }

由于 box 与 font 中都有 shadow,简写 shadow 容易出错,合理运用

font-cc 文字居中

简写参数默认值说明
.font-ccline-height

font-hidden 文本隐藏

简写参数默认值说明
.font-hidden>.nowrap单行生效
.font-hidden>.wrapn指定在行隐藏(仅对部分 -webkit- 生效,建议配合 max-heigh 使用)

font-column 文本分列

简写参数默认值说明
.font-columncount, column-gap, width, color, style, , 1px, @c-line, solid列数, 之间距离, 分割线样式

position

简写参数默认值说明
.positionposition, z-index, top, right, bottom, leftabsolute, 1, 0, top, top, right方位的输入与 margin padding 差不多
.position>.topposition, z-indexabsolute, 1, 0
.position>.bottomposition, z-index, bottomabsolute, 1, 0
.position>.leftposition, z-index, leftabsolute, 1, 0
.position>.rightposition, z-index, rightabsolute, 1, 0
.position>.top-leftposition, z-index, top, leftabsolute, 1, 0, 0
.position>.top-rightposition, z-index, top, rightabsolute, 1, 0, 0
.position>.bottom-leftposition, z-index, bottom, leftabsolute, 1, 0, 0
.position>.bottom-rightposition, z-index, bottom, rightabsolute, 1, 0, 0

fixed

简写参数默认值说明
.fixedz-index, top, right, bottom, left1, 0, top, top, right方位的输入与 margin padding 差不多
.fixed>.topz-index1, 0
.fixed>.bottomz-index, bottom1, 0
.fixed>.leftz-index, left1, 0
.fixed>.rightz-index, right1, 0
.fixed>.top-leftz-index, top, left1, 0, 0
.fixed>.top-rightz-index, top, right1, 0, 0
.fixed>.bottom-leftz-index, bottom, left1, 0, 0
.fixed>.bottom-rightz-index, bottom, right1, 0, 0

absolute

简写参数默认值说明
.absolutez-index, top, right, bottom, leftabsolute, 1, 0, top, top, right方位的输入与 margin padding 差不多
.absolute>.topz-index1, 0
.absolute>.bottomz-index, bottom1, 0
.absolute>.leftz-index, left1, 0
.absolute>.rightz-index, right1, 0
.absolute>.top-leftz-index, top, left1, 0, 0
.absolute>.top-rightz-index, top, right1, 0, 0
.absolute>.bottom-leftz-index, bottom, left1, 0, 0
.absolute>.bottom-rightz-index, bottom, right1, 0, 0

relative

简写参数默认值说明
.relativez-index, top, right, bottom, left1, 0, top, top, right方位的输入与 margin padding 差不多
.relative>.topz-index1, 0
.relative>.bottomz-index, bottom1, 0
.relative>.leftz-index, left1, 0
.relative>.rightz-index, right1, 0
.relative>.top-leftz-index, top, left1, 0, 0
.relative>.top-rightz-index, top, right1, 0, 0
.relative>.bottom-leftz-index, bottom, left1, 0, 0
.relative>.bottom-rightz-index, bottom, right1, 0, 0

position-cc

简写参数默认值说明
.position-ccz-index1基于 translate 居中
.position-ccz-index, width, height1, , width基于 margin 居中

matrix

简写参数默认值说明
.matrixa1 ~ a60 ~ 0需要6个点
.matrix>.matrix3da1 ~ a160 ~ 0需要16个点

translate

简写参数默认值说明
.translatex, y0, 0
.translate>.xx0
.translate>.yy0
.translate>.zz0
.translate>.translate3dx, y, z0, 0, 0

scale

简写参数默认值说明
.scalex, y0, 0
.scale>.xx0
.scale>.yy0
.scale>.zz 0
.scale>.scale3dx, y, z0, 0, 0

rotate

简写参数默认值说明
.rotaterotate0deg
.rotate>.xx0
.rotate>.yy0
.rotate>.zz0
.rotate>.rotate3dx, y, z, rotate0, 0, 0, 0deg

skew

简写参数默认值说明
.skewx, y0deg, 0deg
.skew>.xx0deg
.skew>.yy0deg

bg-img

简写参数默认值说明
.bg-imgurl, background-size, background-position, background-repeat, 100%, center, no-repeat

bg-sprite

简写参数默认值说明
.bg-spriteurl, background-position, background-repeat, , no-repeat

bg-line

简写参数默认值说明
.bg-linerotate, color, ..., @c-black, fade(color-1, 0%), ...支持输入1~5的颜色渐变
.bg-line-rainbowrotate90deg彩虹渐变

bg-radial

简写参数默认值说明
.bg-radialtype, color, ..., @c-black, fade(color-1, 0%), ...支持输入1~5的颜色渐变
.bg-radial-rainbowtypecircle彩虹渐变

spread 扩散线条

简写参数默认值说明
,spread>.topwidth, heigh, color, time100%, 1px, @c-line, 1s顶部发散线条
,spread>.bottomwidth, heigh, color, time100%, 1px, @c-line, 1s底部发散线条(配合行高)
,spread>.leftwidth, heigh, color, time1px, 100%, @c-line, 1s左部发散线条(需要固定高度或者父级有固定高度)
,spread>.rightwidth, heigh, color, time1px, 100%, @c-line, 1s右部发散线条(需要固定高度或者父级有固定高度)
,spread>.top-bottomwidth, heigh, color, time100%, 100%, @c-line, 1s顶部到底部发散线条
,spread>.bottom-topwidth, heigh, color, time100%, 100%, @c-line, 1s底部到顶部发散线条(配合行高)
,spread>.left-rightwidth, heigh, color, time100%, 100%, @c-line, 1s左部到右部发散线条(需要固定高度或者父级有固定高度)
,spread>.right-leftwidth, heigh, color, time100%, 100%, @c-line, 1s右部到左部发散线条(需要固定高度或者父级有固定高度)
less
.d(inline-block);
  .m(0.5rem);
  .box(8rem, 4rem);
  .border;
  .font-cc(calc(3rem - 2px));
  .spread>.bottom(100%, 2px, #da3);

reflect 渐隐镜像效果

简写参数默认值说明
.reflectl, opacity, length0, 0.3, 70%镜像效果距离主体距离, 效果透明度, 效果渐变长度(默认为向下镜像,仅对部分浏览器生效)
.reflect>.abovel, opacity, length0, 0.3, 70%向上镜像
.reflect>.topl, opacity, length0, 0.3, 70%向上镜像
.reflect>.belowl, opacity, length0, 0.3, 70%向下镜像
.reflect>.bottoml, opacity, length0, 0.3, 70%向下镜像
.reflect>.leftl, opacity, length0, 0.3, 70%向左镜像
.reflect>.rightl, opacity, length0, 0.3, 70%向右镜像

btn 按钮

简写参数默认值说明
.btnwidth, height, radius, bg-color, time, darken, lighten, width, 0, @c-btn, 1s, 5%, 70%宽, 高, 圆角, 背景色, 动画时间, hover变暗程度, active时水波纹变亮程度

arrow 箭头

简写参数默认值说明
.arrow>.topsize, color5px, @c-line箭头尖角指向方向
.arrow>.bottomsize, color5px, @c-line
.arrow>.leftsize, color5px, @c-line
.arrow>.rightsize, color5px, @c-line
.arrow>.top-leftsize, color5px, @c-line
.arrow>.top-rightsize, color5px, @c-line
.arrow>.bottom-leftsize, color5px, @c-line
.arrow>.bottom-rightsize, color5px, @c-line

filter 滤镜

简写参数默认值说明
.filter...
.blurblur高斯模糊
.grayscalegrayscale灰度
.sepiasepiav褐色
.saturatesaturate饱和度
.hue-rotatehue-rotate色相旋转
.invertinvert反色
.opacityopacity透明度
.brightnessbrightness亮度
.contrastcontrast对比度
.drop-shadowdrop-shadow阴影

animation

简写参数默认值说明
.animationname, duration, delay, count, 1s, 0s, infinite动画名, 持续时间, 延迟播放, 播放次数
.animation-stateduration, delay, count1s, 0s, infinite持续时间, 延迟播放, 播放次数

transition

简写参数默认值说明
.transitionproperty, duration, delaytransformv, 1s, 0s过度元素, 持续时间, 延迟播放

svg 图片

简写参数默认值说明
.svg-*color, background-size, background-position, background-repeat@c-line, 100%, center, no-repeat正在寻找一套简单的单色模版,未来可能有较大变化

创建时间:

最近更新: