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

三、Less语法

　　（1）变量

 //less代码
 @nice-blue : #5B83AD;
 @light-blue : @nice-blue + #111;
 #header {
   color : @light-blue;
 }

 //css输出
 #header {
    color : #6c94be;
 }

 //将变量名定义为变量
 @fnord : "I am fnord";
 @var : 'fnord';
 content : @@var
 //css输出
 content : "I am fnord"; 

　　(2)混合

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

 //less代码
 .bordered {
     border-top: 1px dotted black;
     border-bottom: 2px solid black;
 }
 #menu a {
     color: #111;
     .bordered;
 }

 //css输出
 .bordered {
   border-top: 1px dotted black;
   border-bottom: 2px solid black;
 }
 #menu a {
   color: #111;
   border-top: 1px dotted black;
   border-bottom: 2px solid black;
 }

　　(3)带参数混合

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

 //less代码
 .border-radius(@radius) {
     border-radius: @radius;
     -webkit-moz-border-radius: @radius;
     -moz-moz-border-radius: @radius;
 }
 #myDiv {
     .border-radius(4px)
 }
 .button {
     .border-radius(6px)
 }

 //css输出
 #myDiv {
   border-radius: 4px;
   -webkit-moz-border-radius: 4px;
   -moz-moz-border-radius: 4px;
 }
 .button {
   border-radius: 6px;
   -webkit-moz-border-radius: 6px;
   -moz-moz-border-radius: 6px;
 }

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

 //less代码
 .border-radius(@radius : 5px) {
     border-radius: @radius;
 }
 #header {
     .border-radius;
 }
 //css输出
 #header {
   border-radius: 5px;
 }

　　：@arguments变量表示多个参数

 //less代码
 .box-shadow(@x:0, @y:0, @blur:1px, @color:#000) {
     -webkit-box-shadow: @arguments;
     -moz-webkit-box-shadow: @arguments;
     box-shadow: @arguments;
 }

 #header {
     .border-radius;
     .box-shadow(2px, 5px)
 }

 //css输出
 #header {
   -webkit-box-shadow: 2px 5px 1px #000000;
   -moz-webkit-box-shadow: 2px 5px 1px #000000;
   box-shadow: 2px 5px 1px #000000;
 }

　　（4）混合模式

 //less代码
 @test-width : 300px;
 .box{
     width: @test-width;
     height: @test-width;
     background-color: yellow;
     .border;
 }
 .border {
     border: 5px solid pink;
 }

 //css输出
 .box {
   width: 300px;
   height: 300px;
   background-color: yellow;
   border: 5px solid pink;
 }
 .border {
   border: 5px solid pink;
 }

 //混合模式带参数
 .border(@test-width) {
     border: 2px 3px 4px @test-width;
 }
 .box {
     margin: 10px;
     .border(10px)
 }

 //css输出
 .box {
   margin: 10px;
   border: 2px 3px 4px 10px;
 }

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

 //匹配模式less代码
 .triangle(top,@w:5px,@c:#ccc) {
     border-width: @w;
     border-color: transparent transparent @c transparent;
     border-style: dashed dashed solid dashed;
 }
 .triangle(bottom,@w:5px,@c:#ccc) {
     border-width: @w;
     border-color: @c transparent transparent transparent;
     border-style: solid dashed dashed dashed;
 }
 .triangle(left,@w:5px,@c:#ccc) {
     border-width: @w;
     border-color: transparent @c transparent transparent;
     border-style: dashed solid dashed dashed;
 }
 .triangle(right,@w:5px,@c:#ccc) {
     border-width: @w;
     border-color: transparent transparent transparent @c;
     border-style: dashed dashed dashed solid;
 }
 // @_表示引用的样式必须包含该样式
 .triangle(@_,@w:5px,@c:#ccc){
     width: 0px;
     height: 0px;
     overflow: hidden;
 }
 .pox1{
     .triangle(top,50px,blue)
 }
 .pox2{
     .triangle(right,50px,red)
 }
 .pox3{
     .triangle(bottom,50px,yellow)
 }
 .pox4{
     .triangle(left,50px,green)
 }

 //css输出
 .pox1 {
   border-width: 50px;
   border-color: transparent transparent #0000ff transparent;
   border-style: dashed dashed solid dashed;
   width: 0px;
   height: 0px;
   overflow: hidden;
 }
 .pox2 {
   border-width: 50px;
   border-color: transparent transparent transparent #ff0000;
   border-style: dashed dashed dashed solid;
   width: 0px;
   height: 0px;
   overflow: hidden;
 }
 .pox3 {
   border-width: 50px;
   border-color: #ffff00 transparent transparent transparent;
   border-style: solid dashed dashed dashed;
   width: 0px;
   height: 0px;
   overflow: hidden;
 }
 .pox4 {
   border-width: 50px;
   border-color: transparent #008000 transparent transparent;
   border-style: dashed solid dashed dashed;
   width: 0px;
   height: 0px;
   overflow: hidden;
 }

　　(6)嵌套

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

 //less代码
 #header {
     width: 100px;
     h3 {
         color: #ccc;
         a {
             font-size: 20px;
             &:hover {
                 text-decoration: none;
             }
         }        

     }
 }

 //css输出
 #header {
   width: 100px;
 }
 #header h3 {
   color: #ccc;
 }
 #header h3 a {
   font-size: 20px;
 }
 #header h3 a:hover {
   text-decoration: none;
 }

　　(7)运算

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

 //less代码
 @base : 5%;
 @filter : @base * 2;
 @other : @base + @filter;
 @base-color : #ccc;
 .test {
     color: #888 / 4;
     background-color: @base-color + #111;
     height: 100% / 2 + @filter;
 }

 //css输出
 .test {
   color: #222222;
   background-color: #dddddd;
   height: 60%;
 }