Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Easy-lessNew to Visual Studio Code? Get it now.
Easy-less

Easy-less

LemonZhang

|
28,781 installs
| (2) | Free
让vscode快速开发less
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Easy-less

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


提merage请点我

Version Install


效果

演示Demo


logo

演示Demo


代码片段

  • 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;
 }

效果

演示Demo

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

效果

演示Demo

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

效果

演示Demo

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

效果

演示Demo

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

效果

演示Demo

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

效果

演示Demo

  • flex-column-mb flex垂直底部固定,中间内容可滚动
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft