12.6-1211总结

LESS
    先声明,后引用
变量:
    @ 名称:值
例如:
    @nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    #header { color: @light-blue; }

    输出#header { color: #6c94be; }
如果对同一个变量定义两次的话,在当前作用域中最后一次定义的将被使用。这与CSS的机制类似,最后一次定义的值会成为这个属性的值。
####混合:
    .名称:值
    在 LESS 中我们可以定义一些通用的属性集为一个 class,然后在另一个 class 中去调用这些属性,如:
    .bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }
如果我们现在需要在其他 class 中引入那些通用的属性集,那么我们只需要在任何 class 中像下面这样调用就可以了:
    #menu a {
    color: #111;
    .bordered;
    }
    .post a {
    color: red;
    .bordered;
    }
.bordered class 里面的属性样式都会在 #menu a 和 .post a 中体现出来:
    #menu a {
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }
    .post a {
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }
带参数混合:
    .border-radius (@radius) {
    border-radius: @radius;
        -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    }
多参数混合:
    .名称(@名称):值
作用域:
    LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止。    
    

posted @ 2015-12-12 10:53  小菲菲&毛毛虫  阅读(150)  评论(0)    收藏  举报