less

 1 /*定义变量*/
 2 @rColor: red;
 3 @gColor: purple;
 4 @bFSize: 100px;
 5 
 6 .box1{
 7   color: @rColor;
 8   font-size: @bFSize;
 9 }
10 
11 .box2{
12   color: @gColor;
13   font-size: @bFSize;
14 }

 1 @rColor: red;
 2 @bWith: 200px;
 3 
 4 .box{
 5   background-color: @rColor;
 6   width: @bWith;
 7   height: @bWith + 100;
 8   h1{
 9      color: green;
10   }
11   div{
12     width: @bWith / 2;
13     height: @bWith / 1.5;
14     background-color: deepskyblue;
15     h2{
16       color: goldenrod;
17     }
18   }
19 }

 1 @w: 300px;
 2 @h: 50px;
 3 
 4 h1, h2{
 5   border: 1px solid #000;
 6 }
 7 
 8 h1{
 9   width: @w - 100;
10   height: @h + 100;
11 }
12 
13 h2{
14   width: @w / 3;
15   height: @h * 3;
16 }

 1 .yuanJiao(@radius: 20px, @rotate: 0){
 2    border-radius: @radius;
 3    transform: rotate(@rotate);
 4 }
 5 
 6 .box1, .box2{
 7   width: 200px;
 8   height: 200px;
 9   margin: 10px;
10 }
11 
12 .box1{
13   background-color: green;
14   .yuanJiao();
15 }
16 
17 .box2{
18   background-color: red;
19   .yuanJiao(60px, 120deg);
20 }

 1 .radius(leftTop, @w: 30px){
 2     border-top-left-radius: @w;
 3 }
 4 
 5 .radius(rightTop, @w: 30px){
 6   border-top-right-radius: @w;
 7 }
 8 
 9 .radius(leftBottom, @w: 30px){
10   border-bottom-left-radius: @w;
11 }
12 
13 .radius(rightBottom, @w: 30px){
14   border-bottom-right-radius: @w;
15 }
16 
17 .radius(@w: 30px){
18   border-radius: @w;
19 }
20 
21 
22 div{
23   width: 200px;
24   height: 200px;
25   margin: 20px;
26 }
27 
28 // .box1{
29 //   background-color: red;
30 //   .radius(leftTop);
31 // }
32 .box1{
33   background-color: red;
34   .radius(leftTop, 100px);
35 }
36 
37 .box2{
38   background-color: green;
39   .radius(rightBottom, 100px);
40 }
41 
42 .box3{
43   background-color: blue;
44   .radius(leftBottom, 100px);
45 }
46 
47 .box4{
48   background-color: purple;
49   .radius(rightBottom, 100px);
50 }