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%;
}