less开发常见基本用法总结

test.less文件

// 变量使用
@width:200px;
@height:100px;
@bgColor:aqua;

//兼容各个浏览器
.autoprefix(@name, @t) {
  -webkit-@{name}: @t;
  -moz-@{name}: @t;
  -o-@{name}: @t;
    @{name}: @t;
}

//混合
.pubname{
  width: 80px;
  height: 50px;
  background-color: beige;
}

//转义
@min765: ~"(min-width: 0px) and (max-width: 765px)";  

// 复用样式  @bg为可选择参数
.whb(@w,@h,@bg:undefined){
  width: @w;
  height: @h;
  background-color: @bg;
}

// 命名空间和访问符
#spaceSty(){
  .common{
     //调用公共样式
   .whb(300px,300px, #000);
   
    // display: flex;
    // justify-content: space-between;
   .autoprefix(display,flex);
   .autoprefix(justify-content,space-between);
  }

  .spacep{
    //调用公共样式
    .whb(100px,100px,rgb(240, 138, 138));
  }
}

// 里面嵌套 .name-p .name-p1类名
.name{
  .whb(@width,@height,aqua);

  @media @min765{
    width:100px;
    height: 100px;
  }

  //@规则嵌套和冒泡
  //计算符
  @media(min-width:768px){
    .whb(@width + 10px,@height + 100p);
  }

  &-p{
    .pubname();
  }

  &-p1{
    .pubname();
  }
}

// .space里面嵌套 .space-p .space-p1类名
.space{
  #spaceSty.common();

  &-p{
    #spaceSty.spacep();
  }

  &-p1{
    #spaceSty.spacep();
  }
}

test.less文件生成的对应test.css文件

.pubname {
  width: 80px;
  height: 50px;
  background-color: beige;
}
.name {
  width: 200px;
  height: 100px;
  background-color: aqua;
}
@media (min-width: 0px) and (max-width: 765px) {
  .name {
    width: 100px;
    height: 100px;
  }
}
@media (min-width: 768px) {
  .name {
    width: 210px;
    height: 200px;
    background-color: undefined;
  }
}
.name-p {
  width: 80px;
  height: 50px;
  background-color: beige;
}
.name-p1 {
  width: 80px;
  height: 50px;
  background-color: beige;
}
.space {
  width: 300px;
  height: 300px;
  background-color: #000;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
}
.space-p {
  width: 100px;
  height: 100px;
  background-color: #f08a8a;
}
.space-p1 {
  width: 100px;
  height: 100px;
  background-color: #f08a8a;
}

less.html测试

<div class="name">
      <p class="name-p"></p>
      <p class="name-p1"></p>
  </div>

  <div class="space">
    <p class="space-p"></p>
    <p class="space-p1"></p>
  </div>