三、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 : @@var17 //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 }