Less学习笔记（一）

一：变量

 语法： @变量名

 特性：1）按需加载

             2）如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用

    

@var: 0;
.class1 {
    @var: 1;
    .class {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

最后输出：

  .class1 .class{

      three:3;

}

  .class1{

   one:1//当前块级作用域中@var=1;

 }

二：混合（mixin）——讲通用的样式定义为一个类，然后在其他类中调用即可

  1）不带参数的混入

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

如果需要在其他的类中引入通用样式，按照以下方式即可

#menu a {
    color: #111;
    .bordered;
}

编译之后，在.bordered中的样式都会在被引入的样式中体现

#menu a {
    color: #111;   
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

  2）带参数的混入

.border-radius (@radius) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}

然后在其他的类中调用：

#header {
    .border-radius(4px);
}
.button {
    .border-radius(6px);
}

这种带参数的混入适用的场景：通用的样式需要定义，但是每个组件所对应的这些通用样式的值有差异；

 注意：1）带参混入，也可以为参数指定默认值

border-radius (@radius: 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}

如果这样调用

#header {
    .border-radius;
}

那么#header{

     border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

}

   2）如果不想单独处理所有的参数，可以使用@arguments (包含了传进来的所有参数的值)

   .box-shadow(@x:0;@y:0;@blur:1px;@color:#000){

     box-shadow:@arguments；//0 0 1px #000;

     -webkit-box-shadow:@arguments；//0 0 1px #000;

    -moz-box-shadow:@arguments；//0 0 1px #000;

  }

   .box-shadow(2px,5px)

将会输出：

    box-shadow:@arguments；//0 0 1px #000;

     -webkit-box-shadow:@arguments；//0 0 1px #000;

    -moz-box-shadow:@arguments；//0 0 1px #000;

  3) !important  关键字

   在调用时，如果在混合的后面加上!important ,表示将混合带来的所有属性标记为！important