less

/*定义变量*/
@rColor: red;
@gColor: purple;
@bFSize: 100px;

.box1{
  color: @rColor;
  font-size: @bFSize;
}

.box2{
  color: @gColor;
  font-size: @bFSize;
}

@rColor: red;
@bWith: 200px;

.box{
  background-color: @rColor;
  width: @bWith;
  height: @bWith + 100;
  h1{
     color: green;
  }
  div{
    width: @bWith / 2;
    height: @bWith / 1.5;
    background-color: deepskyblue;
    h2{
      color: goldenrod;
    }
  }
}

@w: 300px;
@h: 50px;

h1, h2{
  border: 1px solid #000;
}

h1{
  width: @w - 100;
  height: @h + 100;
}

h2{
  width: @w / 3;
  height: @h * 3;
}

.yuanJiao(@radius: 20px, @rotate: 0){
   border-radius: @radius;
   transform: rotate(@rotate);
}

.box1, .box2{
  width: 200px;
  height: 200px;
  margin: 10px;
}

.box1{
  background-color: green;
  .yuanJiao();
}

.box2{
  background-color: red;
  .yuanJiao(60px, 120deg);
}

http://lesscss.cn/ 上编写了一些函数

.radius(leftTop, @w: 30px){
    border-top-left-radius: @w;
}

.radius(rightTop, @w: 30px){
  border-top-right-radius: @w;
}

.radius(leftBottom, @w: 30px){
  border-bottom-left-radius: @w;
}

.radius(rightBottom, @w: 30px){
  border-bottom-right-radius: @w;
}

.radius(@w: 30px){
  border-radius: @w;
}


div{
  width: 200px;
  height: 200px;
  margin: 20px;
}

// .box1{
//   background-color: red;
//   .radius(leftTop);
// }
.box1{
  background-color: red;
  .radius(leftTop, 100px);
}

.box2{
  background-color: green;
  .radius(rightBottom, 100px);
}

.box3{
  background-color: blue;
  .radius(leftBottom, 100px);
}

.box4{
  background-color: purple;
  .radius(rightBottom, 100px);
}

 

@import "pipei";
@import "hunhe";
@import "hanshus";
// 引入
@import "qiantao";
/*hhhhhh*/
@import "yunsuan";