首页 > 代码库 > Css预处理器---Less(二)

Css预处理器---Less(二)

2024-10-16 05:51:39   214人阅读

三、Less语法

　　（1）变量

 1 //less代码
 2 @nice-blue : #5B83AD;
 3 @light-blue : @nice-blue + #111;
 4 #header {
 5   color : @light-blue;   
 6 }
 7 
 8 //css输出
 9 #header {
10    color : #6c94be;
11 }
12 
13 //将变量名定义为变量
14 @fnord : "I am fnord";
15 @var : ‘fnord‘;
16 content : @@var
17 //css输出
18 content : "I am fnord";

　　(2)混合

　　　　：定义的样式.bordered可以在其他样式内调用

 1 //less代码
 2 .bordered {
 3     border-top: 1px dotted black;
 4     border-bottom: 2px solid black;
 5 }
 6 #menu a {
 7     color: #111;
 8     .bordered;
 9 }
10 
11 //css输出
12 .bordered {
13   border-top: 1px dotted black;
14   border-bottom: 2px solid black;
15 }
16 #menu a {
17   color: #111;
18   border-top: 1px dotted black;
19   border-bottom: 2px solid black;
20 }

　　(3)带参数混合

　　　　：以下代码中在.border-radius样式传入参数@radius定义border-radius属性，在#myDiv样式中调用该样式

 1 //less代码
 2 .border-radius(@radius) {
 3     border-radius: @radius;
 4     -webkit-moz-border-radius: @radius;
 5     -moz-moz-border-radius: @radius;
 6 }
 7 #myDiv {
 8     .border-radius(4px)
 9 }
10 .button {
11     .border-radius(6px)
12 }
13 
14 //css输出
15 #myDiv {
16   border-radius: 4px;
17   -webkit-moz-border-radius: 4px;
18   -moz-moz-border-radius: 4px;
19 }
20 .button {
21   border-radius: 6px;
22   -webkit-moz-border-radius: 6px;
23   -moz-moz-border-radius: 6px;
24 }

　　：在参数中设定默认值@radius:5px

 1 //less代码
 2 .border-radius(@radius : 5px) {
 3     border-radius: @radius;
 4 }
 5 #header {
 6     .border-radius;
 7 }
 8 //css输出
 9 #header {
10   border-radius: 5px;
11 }

　　：@arguments变量表示多个参数

 1 //less代码
 2 .box-shadow(@x:0, @y:0, @blur:1px, @color:#000) {
 3     -webkit-box-shadow: @arguments;
 4     -moz-webkit-box-shadow: @arguments;
 5     box-shadow: @arguments;
 6 }
 7 
 8 #header {
 9     .border-radius;
10     .box-shadow(2px, 5px)
11 }
12 
13 //css输出
14 #header {
15   -webkit-box-shadow: 2px 5px 1px #000000;
16   -moz-webkit-box-shadow: 2px 5px 1px #000000;
17   box-shadow: 2px 5px 1px #000000;
18 }

 　　（4）混合模式

 1 //less代码
 2 @test-width : 300px;
 3 .box{
 4     width: @test-width;
 5     height: @test-width;
 6     background-color: yellow;
 7     .border;
 8 }
 9 .border {
10     border: 5px solid pink;
11 }
12 
13 //css输出
14 .box {
15   width: 300px;
16   height: 300px;
17   background-color: yellow;
18   border: 5px solid pink;
19 }
20 .border {
21   border: 5px solid pink;
22 }
 1 //混合模式带参数
 2 .border(@test-width) {
 3     border: 2px 3px 4px @test-width;
 4 }
 5 .box {
 6     margin: 10px;
 7     .border(10px)
 8 }
 9 
10 //css输出
11 .box {
12   margin: 10px;
13   border: 2px 3px 4px 10px;
14 }

 　　(5)匹配模式：指定样式.triangle传入参数,所得结果嵌套到pox样式中

 1 //匹配模式less代码
 2 .triangle(top,@w:5px,@c:#ccc) {
 3     border-width: @w;
 4     border-color: transparent transparent @c transparent;
 5     border-style: dashed dashed solid dashed;
 6 }
 7 .triangle(bottom,@w:5px,@c:#ccc) {
 8     border-width: @w;
 9     border-color: @c transparent transparent transparent;
10     border-style: solid dashed dashed dashed;
11 }
12 .triangle(left,@w:5px,@c:#ccc) {
13     border-width: @w;
14     border-color: transparent @c transparent transparent;
15     border-style: dashed solid dashed dashed;
16 }
17 .triangle(right,@w:5px,@c:#ccc) {
18     border-width: @w;
19     border-color: transparent transparent transparent @c;
20     border-style: dashed dashed dashed solid;
21 }
22 // @_表示引用的样式必须包含该样式
23 .triangle(@_,@w:5px,@c:#ccc){
24     width: 0px;
25     height: 0px;
26     overflow: hidden;
27 }
28 .pox1{
29     .triangle(top,50px,blue)
30 }
31 .pox2{
32     .triangle(right,50px,red)
33 }
34 .pox3{
35     .triangle(bottom,50px,yellow)
36 }
37 .pox4{
38     .triangle(left,50px,green)
39 }
40 
41 //css输出
42 .pox1 {
43   border-width: 50px;
44   border-color: transparent transparent #0000ff transparent;
45   border-style: dashed dashed solid dashed;
46   width: 0px;
47   height: 0px;
48   overflow: hidden;
49 }
50 .pox2 {
51   border-width: 50px;
52   border-color: transparent transparent transparent #ff0000;
53   border-style: dashed dashed dashed solid;
54   width: 0px;
55   height: 0px;
56   overflow: hidden;
57 }
58 .pox3 {
59   border-width: 50px;
60   border-color: #ffff00 transparent transparent transparent;
61   border-style: solid dashed dashed dashed;
62   width: 0px;
63   height: 0px;
64   overflow: hidden;
65 }
66 .pox4 {
67   border-width: 50px;
68   border-color: transparent #008000 transparent transparent;
69   border-style: dashed solid dashed dashed;
70   width: 0px;
71   height: 0px;
72   overflow: hidden;
73 }

　　(6)嵌套

　　：父级元素内可以直接嵌套子级元素，&后面一般跟伪类选择器如(:hover,:focus)等

 1 //less代码
 2 #header {
 3     width: 100px;
 4     h3 {
 5         color: #ccc;
 6         a {
 7             font-size: 20px;
 8             &:hover {
 9                 text-decoration: none;
10             }
11         }        
12 
13     }
14 }
15 
16 //css输出
17 #header {
18   width: 100px;
19 }
20 #header h3 {
21   color: #ccc;
22 }
23 #header h3 a {
24   font-size: 20px;
25 }
26 #header h3 a:hover {
27   text-decoration: none;
28 }

　　(7)运算

　　：同类属性之间可以使用+-*/进行数学运算

 1 //less代码
 2 @base : 5%;
 3 @filter : @base * 2;
 4 @other : @base + @filter;
 5 @base-color : #ccc;
 6 .test {
 7     color: #888 / 4;
 8     background-color: @base-color + #111;
 9     height: 100% / 2 + @filter;
10 }
11 
12 //css输出
13 .test {
14   color: #222222;
15   background-color: #dddddd;
16   height: 60%;
17 }

 

Css预处理器---Less(二)


联系
我们