LESS

标签：

LESS

less其实也是CSS，是css编辑器，比较明显的作用是简化代码，以及重用性

设置变量变量

    @color: white;
　@width: 10px;　
   @height: 10px;  

     div{

     color: @color;

　　white:@width
    }


给div的字体颜色变成白色，同理也可以加上宽 高、边框等等css样式


混合变量

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


       div{
          .bordered 

        }
       p{
          .bordered 
       }

 也可在其它元素中引入定义的高度和边框 这也是用的比较多的方式，设定好的混合变量可以重复使用

   **带参数混合**

    .border-radius (@radius) {

      border-radius: @radius;
     -moz-border-radius: @radius;
     -webkit-border-radius: @radius;

      }


    div{
     .border-radius(4px);
     }


这样的好处在于，之前要重复写很多代码的元素，现在只要进行调用
   .border-radius (@radius) 就可以了，避免了重复写兼容性的问题。


  **多参数混合**

多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。

       .wrap (@w;@h) {

        white:@w;
        hight:@h;

      }

       div{
          .wrap(100px;100px);
      }


  **@arguments 变量**

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

      .box-shadow(2px, 5px);


     会显示：
        box-shadow: 2px 5px 1px #000;


 **@rest 变量**

如果需要在 mixin 中不限制参数的数量，可以在变量名后添加 ...，表示这里可以使用 N 个参数。

     .mixin (...) {        // 接受 0-N 个参数



**!important关键字**


       .unimportant {

            .mixin(1); 
        }
        .important {
            .mixin(2) !important; 
          }



   会显示：
     .unimportant {
    border: 1;
    boxer: 1;
     }
     .important {
         border: 2 !important;
         boxer: 2 !important;
        }

LESS

标签：

原文地址：http://www.cnblogs.com/bellow/p/4663106.html