less学习笔记

less is more , than css

less使用到的编译工具: koala

less使用的软件: sublime text(推荐使用)

在less 中注释使用的是//     ( /**/是会被编译的)

less中变量的声明使用: @

     如:

@w : 20px; @h : 50px;

   调用 :

.box{ width : @w;  height : @h; }

  混合:                      

border{
           border  : 1px solid red;
           box_2 { .box;   //调用上面的box
                    margin : 0 auto;
        }    

混合-可带参数:

border_02(@b_w){
      border : @b_w solid red;
  }

//调用
text_maix{
        border_02(20px);
}    

混合-可带参数默认值:

border_03(@b_w : 10){
        border : @b_w solid red;
}

匹配模式:相当于js中的if(未插入代码)

运算: 可以进行加减乘除的运算(未插入代码)

 

嵌套:尽量减少嵌套的层数。如以下的a要嵌套在哪里,是在ul下还是在li下,需要做一定的考量,标准是:尽量禁烧嵌套的层数。

&表示上一层选择器。如下代码,它表示的是 a

ul{
     width : 500px;

     li{ margin : 0; }     

     a{ color : red;
          & :hover{ color : green;}
 }   
}

 

@argument 传入的参数太多,在使用时不想写那么多的参数,只需一个@argument即可,这样既可以省事也可以减少不必要的错误。

border_arg(@w: 20px, @c : red, @x : solid){
    border: @argument;  
}

 

避免编译: 有些内容不应该由这个软件编译掉就可以用  “~”表示该段内容不要编译

text_03{
      width : ~"clc(300px-20px)"; 
}

!important (一般不推荐使用,容易造成问题)

text_important{
      border_radius() !important;  
}

 

posted @ 2016-06-11 12:02  liaoali  阅读(142)  评论(0编辑  收藏  举报