less初步接触

以前一直听说less/sass，今天我开始学习less

 

 

@font-color:#333333;//字体颜色
@font-size:1.6rem;//默认字体大小
@background-colorE:#eeeeee;//背景色为#eeeeee
@overFlowHidden:hidden;//
@left:left;//左
@right:right;//右
@center:center;//中
@top1:1rem;//上边1rem
@bottom1:1rem;//下边1rem
@left1:1rem;//左边1rem
@right1:1rem;//右边1rem
/*******
*计算rem
********/
@media screen and (max-width: 1366px){
  html{
    font-size: 7px;
  }
  body{
    font-size: 7px;
  }
}
@media (min-width: 1367px) and (max-width:1600px ){
  html{
    font-size: 8px;
  }
  body{
    font-size: 8px;
  }
}
@media screen and (min-width:1601px ){
  html{
    font-size: 10px;
  }
  body{
    font-size: 10px;
  }
}

/**
计算边框(类似于js中的函数)
**/
.borderLeft(@style:solid,@width:0.1rem,@color:#efefef){/*样式，宽度，颜色*/
  border-left-color: @color;
  border-left-width: @width;
  border-left-style: @style;
}
.borderRight(@style:solid,@width:0.1rem,@color:#efefef){/*样式，宽度，颜色*/
  border-right-color: @color;
  border-right-width: @width;
  border-right-style: @style;
}
.borderTop(@style:solid,@width:0.1rem,@color:#efefef){/*样式，宽度，颜色*/
  border-top-color: @color;
  border-top-width: @width;
  border-top-style: @style;
}
.borderBottom(@style:solid,@width:0.1rem,@color:#efefef){/*样式，宽度，颜色*/
  border-bottom-color: @color;
  border-bottom-width: @width;
  border-bottom-style: @style;
}

/**
计算宽度或高度
**/
.width(@width:100%){
  width: @width;
}
.height(@height:2rem){
  height: @height;
}



body{
  width: 100vw;
  height: 100vh;

  background-color: @background-colorE;
  overflow: @overFlowHidden;
}
.App{
  font-size: @font-size;
  color: @font-color;
  width: 80vw;
  margin-left: 10vw;
}
.alignCenter{
  text-align: @center;
}
.alignLeft{
  text-align: @left;
}
.alignRight{
  text-align: @right;
}
.App{
  .test{
    font-size: 3rem;
    background-color: @background-colorE;
    .width(70%);//类似函数的调用
    .height(10rem);
    .borderBottom(solid,0.1rem,#dddddd)
  }
}