Easy-less

为了少敲重复代码,节约时间,快速开发样式; 如果大家有开发过程中好用的样式 欢迎提merage

提merage请点我

效果

logo

代码片段

• absolute-aligned 绝对定位水平垂直居中

 position: absolute;
 left: 0px;
 right: 0px;
 top: 0px;
 bottom: 0px;
 margin: auto;

• trangile css实现的三角形

 width: 0;
 height: 0;
 border: ${1:@width}px solid;
 border-color: transparent transparent ${2:@color};

• border-tb 上下边框设置

 border-top: @n solid @color;
 border-bottom: @n solid @color;

• border-lr 左右边框设置

 border-left: @n solid @color;
 border-right: @n solid @color;

• margin-tb 上下边距设置

 margin-top: @n;
 margin-bottom: @n;

• margin-lr 左右边距设置

 margin-left: @n;
 margin-right: @n;

• padding-tb 上下内边距设置

 padding-top: @n;
 padding-bottom: @n;

• padding-lr 左右内边距设置

 padding-left: @n;
 padding-right: @n;

• font-YaHei 微软雅黑字体

 font-family: MicrosoftYaHeiUI;
 font-size: ${1:@f}px;
 color: ${2:@c};

• font-ArialMT ArialMT字体

 font-family: ArialMT;
 font-size: ${1:@f}px;
 color: ${2:@c};

• font-pf-medium 平方宋字体-细体

 font-family: PingFangSC-Medium;
 font-size: ${1:@f}px;
 color: ${2:@c};

• font-pf-Regular 平方宋字体-regular

 font-family: PingFangSC-Regular;
 font-size: ${1:@f}px;
 color: ${2:@c};

• lh 快速设置行高

 height: ${1:@h}px;
 line-height: ${2:@h}px;

• posAbsolute 快速绝对定位

 position: absolute;
 top: ${@t}px;
 right: ${@r}px;
 bottom: ${@b}px;
 left: ${@l}px;

• textflow 文本溢出

 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 100%;

• dialog-mask 弹窗遮罩

 opacity: 0.8;
 background: [#000000](https://github.com/lemondreamtobe/Easy-less/issues/000000);
 width: 100%;
 height: 100%;

• dialog-mask-box 弹窗遮罩父级

 position: fixed;
 z-index: 1000;
 left: 0px;
 right: 0px;
 top: 0px;
 bottom: 0px;

• tf-aligned tansform的水平垂直居中

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

• wh 快速设置宽高

 width: ${1:@h}px;
 height: ${2:@h}px;

• bone-card 骨架图卡片

 background: ${1:#F4F4F4;}
 border-radius: ${2:8px;}
 width: ${3:@w}px;
 height: ${4:@h}px;

• bone-box 骨架图盒子

  position: fixed;
  z-index: 9999;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  font-size: 0px;
  background: #ffffff;
  opacity: 1;
  transition: all 1s ease;

• bone-disappear 骨架图消失动效

 z-index: -1;
 opacity: 0;

• lr-layout 左右两侧布局

 .left{
    width: @width px;
    float: left;
 }
 .right{
   margin-left: @height px;
 }

效果

• flex-rl-layout flex左侧定宽布局
• flex-rl-layout flex右侧定宽布局

效果

• flex-middle-layout flex多栏居中布局

效果

• flex-middleSide-layout flex多栏居中两侧贴边布局

效果

• flex-column-tmb flex垂直头部底部固定，中间内容可滚动

效果

• flex-column-tm flex垂直头部固定，中间内容可滚动

效果

• flex-column-mb flex垂直底部固定，中间内容可滚动