less学习笔记

Posted 2020-07-24 LAL-alice

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;  
}