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

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接