less

Posted 2022-04-08 zhangzhengyang

 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 

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

 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