Less-mixin函数基础二

//mixin函数

基础使用方法

--包含选择器，example:

.test(){

    &:hover{

        border:1px solid red;

    }

}

button{

    .test;

}

//output css

button:hover {

  border: 1px solid red;

}

--命名空间，example:

.test(){

    .Height{

        height:80px;

    }

}

//grammar 1

.study{

    .test>.Height;

}

//grammar 2

.study{

    .test > .Height;

}

//grammer 3

.study{

    .test .Height;

}

//grammar 4

.study{

    .test.Height;

}

//output css

.study {

  height: 80px;

}

小结：你可以在mixin函数中定义多个函数，并可以用以上4种任意方法去调用，他们之间的空格和>都是可选的

可有的类似于JavaScript中的方法对象，区别在于他的调用没有那么严谨，example：

#outer > .inner;

#outer > .inner();

#outer .inner;

#outer .inner();

#outer.inner;

#outer.inner();

全部都是可以成功调用#outer mixin函数中的.inner函数--（此处来自文档）

--保护命名空间，example:

@mianColor:red;

//grammar 1

#test when(@mianColor=red){

    .childColor{

        border:1px solid blue;

    }

}

//output css

#test .childColor {

  border: 1px solid blue;

}

//grammar 2

#test when(@mianColor=red){

    .childColor(){

        border:1px solid blue;

    }

    .study{

        .childColor;

    }

}

//output css

#test .study {

  border: 1px solid blue;

}

当这个时候.childColor函数无论是立即执行还是指定条件执行在#test外部都是无法调用的，这样起到命名空间保护

这里的 when(@mianColor=red)起到了当在指定条件为true是才会执行

注意：@mianColor的声明必须在外部才会起到作用，example:

when true

//grammar 1

@mianColor:red;

#test when(@mianColor=red){

    .childColor{

        border:1px solid blue;

    }

}

//grammar 2

@mianColor:blue;

#test when(@mianColor=red){

    .childColor{

        border:1px solid blue;

    }

}

@mianColor:red;

when false

//grammar 1

@mianColor:blue;

#test when(@mianColor=red){

    .childColor{

        border:1px solid blue;

    }

}

//grammar 2

@mianColor:red;

#test when(@mianColor=red){

    .childColor{

        border:1px solid blue;

    }

}

@mianColor:blue;

//error grammar 1

@mianColor:red;

#test when(@mianColor=red){

    @mianColor:blue;

    .childColor{

        border:1px solid blue;

    }

}

这样的最终结果还是为真

//error grammar 2

@mianColor:blue;

#test when(@mianColor=red){

    @mianColor:red;

    .childColor{

        border:1px solid blue;

    }

}

这样的最终结果还是为假

小结：内部不会改变外部声明变量，同时外部也不能调取内部函数，这其实和JavaScript函数的闭包是一个道理
作者：leona
原文链接：http://www.cnblogs.com/leona-d/p/6296580.html