zoukankan      html  css  js  c++  java
  • 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

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

  • 相关阅读:
    mac登录界面的背景壁纸图片位置
    【转载】MAC系统修改帐号短名和个人文件夹名称
    ios 6.x系统UITextView 设置为密码输入无效的问题
    一个简单的果冻弹动动画
    ios中的自动释放池
    ios 静态库联合调试
    【转】IOS制作静态库
    objective-c中为什么不能实现多重继承及如何变通实现
    回调中释放自己会不会导致崩溃?
    【转载】Objective-C runtime 消息机制
  • 原文地址:https://www.cnblogs.com/leona-d/p/6296580.html
Copyright © 2011-2022 走看看