First acquaintance with the dynamic style language less

Data reference and http://lesscss.cn/

basic grammar

define variable

@sheetstyle：value；

@jdRed:#e4393c;

@thinBorder:3px; 
@halfOpacity:0.2; 
@baseFont:"SimeHei"; 
@baseSize:14px; 
@normalBorderStyle:solid; .box 
{ 
  background: rgba(22,40,60,@halfOpacity); 
  border:@thinBorder @normalBorderStyle @jdRed; 
} 
//arithmetic operators
 @md-width:970px; 
@col-count:12; 
.col-md-1{ 
  width: @md-width/@col-count; 

} 
.col-md-2{ 
  width: @md-width*2/@col-count; 
  border:1px solid @jdRed; 
} 
//mix
 in .box5{ 
  padding: 30px; 
  border: 4px solid #00AA88; 
  margin-bottom: 20px; 
} 
.main{ 
/ / Equivalent to copying the style of box5 to main
   .box5 
} .main 
{
  //You can write the style of the child selector in the parent selector, this style will be compiled into .main .point
   .point{background: red;} 
} 
//Mixed with parameters.well5
 (@pd,@bw,@ mb:30px){ //@md:30px is the default value of es6
   padding:@pd; 
  border: @bw solid #00CC00; 
  margin-bottom: @mb; 
} 
.well{ 
  .well5(15px,2px); 
  background: @jdRed; 
  opacity: @halfOpacity; 
} 
//Support
 nesting.main { 
  background: #E0E0E0; 
  .affix{ 
    list-style: none; 
    >li{ 
      display: inline-block; 
      >a{ 
       text-decoration: none; 
        & :hover{ //& points to a
           color:palevioletred;
         } 
      } 
    }
  }
}
//函数
.col-md-6{
  width: floor(@md-width*6/@col-count);
}
.box9{
  color:@jdRed;
  background: lighten(@jdRed,20%);
  //高亮百分之几
}
.my-small{
  width: image-width("ad.png");
  height: image-height("ad.png");
  border:1px solid red;
}